進めてる(進めていく)教材とか

• HypertextCandy React入門チュートリアル 完了
• りあクト！ TypeScriptで始めるつらくないReact開発 7/13 完了
• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 完了
• Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！ 完了
• React 公式チュートリアル 完了

今日やったこと

• りあクト！ TypeScriptで始めるつらくないReact開発 第8章 何はなくともコンポーネント

りあクト！ TypeScriptで始めるつらくないReact開発 第8章 何はなくともコンポーネント

ざっくりサマリー

コンポーネントのライフサイクル

• コンポーネントにおけるライフサイクル

  • マウント → レンダリング → 再レンダリング → アンマウント

• ライフサイクルフェーズ

  • Mountingフェーズ: コンポーネント初期化 → 仮想DOMにマウント → レンダリング
  • Updatingフェーズ: 差分検出 → 再レンダリング
  • Unmountingフェーズ: 仮想DOMからコンポーネント削除

  • Error Handlingフェーズ: 子孫コンポーネントのエラー検知

    Presentational Component と Container Component

• Presentational Component: 見た目を責務とするコンポーネント
• Container Component: Presentational Component とロジックを追加したコンポーネント
• Hooksの機能があるため分ける必要はないかも？

• HooksがあってもPresentational と Container で分けるのは有効

  • きれいなコンポーネント設計の矯正ギプスになるため
  • 公式推奨 コンポーネントの正しい作り方
  • デザインモックからUIをコンポーネントに分解
  • ロジックを排した静的バージョンを作成
  • UI表現のための最低限の「状態｣を挙げる
  • ｢状態｣をどのコンポーネントに配置するか決定する
  • データを上流から流れるようにする
  • 1,2がPresentational Component作成に対応

  • 3-5がContainer Component作成に対応

    りあクト！ TypeScriptで始めるつらくないReact開発 第9章 Hooks、関数コンポーネントの合体強化パーツ

    ざっくりサマリー

    Hooks に至るまでの物語

• mixins

  • わかりやすい,書きやすい ≠ 設計がキレイ,メンテナンス性が高い
  • 暗黙的な依存関係をもつことがある
  • 名前の衝突が起きやすい
  • mixinが他のmixinに依存するようになる → 壊れやすい = メンテナンス性が悪い

• HOC(Higher Order Component)

  • HOC(高階コンポーネント):コンポーネントを引数に取り,コンポーネントを返す関数のこと
  • TypeScriptを使うときは内側と外側でpropsの型の辻褄をあわせる必要がある

• Render Props

  • ReactElementsを返す関数をpropsとして受け自身のレンダリングに利用
  • HOCとくらべ名前衝突が起きにくい,起こってもわかりやすい
  • TypeScript使用時,propsの型合成の必要がない
  • 機能を注入するpropsがわかりやすい
  • JSX内で動的に扱うことができる
  • ラッパー地獄に陥りやすい

• Hooks

  • HOCもrender propsも再利用できるほどに抽象化できなかった
  • Hooksはロジックを完全に切り離しできる → 再利用が容易

  • Hooksのおかげでクラスコンポーネントでできることは関数コンポーネントでもほぼできるようになった

    Hooks で State を扱う

• TypeScriptでuseState使うときはstateの型が推論できるかどうかに注意
• 初期値に渡せる型を持ったデータがない場合は明示的に型引数を渡す必要がある

• Hooksの呼び出しは関数コンポーネントのトップレベルでないといけない

  Hooks で副作用を扱う

• 副作用とは: コンポーネントの状態を変化させ,以降の出力を変えてしまう処理

  • 例: y=f(x) → ay=f(x) にしてしまうような処理のこと
  • props(x)が同一でも出力(y)の内容を変えてしまう(ay)ような処理のこと
• ライフサイクルメソッドのような使い方ができる

• ライフサイクルメソッドとの違い

  • 実行タイミング
  • useEffect: レンダリング直後(表示された後,反映される)
  • componentDidMount: レンダリング前(処理が終わるまで表示されない)
  • componentDidMountと同じタイミングのHooks(useLayoutEffect)も提供されている
  • 基本はuseEffectを使う
  • propsとstateの値の即時性
  • クラスコンポーネントではミュータブルな値として保持
  • 関数コンポーネントではイミュータブルな値として保持
  • 凝集の単位
  • ライフサイクルメソッド → 時間的凝集度が高く,機能的凝集度が低い

  • EffectHooks → 機能的凝集度が高い 故に可読性が高く,再利用しやすい

    Hooks におけるメモ化を理解する

• メモ化: 関数が呼び出されるたびに再計算されることを防ぐプログラム高速化の手法

  • 計算結果をメモっておく
• useMemo: 関数の実行結果をメモ化する
• useCallback: 関数定義そのものをメモ化する

• useRef: 再レンダリングを伴わずになんらかのデータを関数コンポーネントで保存しておきたいときにメモ化するときにも使える

  Custom Hook でロジックを分離・再利用する

• Presentational ComponentではJSXで使われているものだけをpropsとして設定してやればOK
• Containaer ComponentはPresentational ComponentをインポートしてCustom Hookとつなげてやる

まとめ

Hooksも奥が深いですね。。。
Hooksに至るまでの歴史を見てて移り変わりの激しいフロントエンドではそれまでの持っている技術を捨てる勇気がないと対応していけないなと感じました。
Hooksを捨てないといけない日もいつか来るのでしょうか。そして僕はそのときHooksを捨てることができるんでしょうか。
ふとそんなことが頭をよぎりました。

それではまた明日。