About me

おしながき

React Hooksの概要を掴みたい人が、

React Hooksにはどんなメリットがあるのか理解できる

話すこと

• React Hooksとは
• React Hooks登場前後をコードで比較してメリットの確認
  • コードはこちら: yinm/study-react-hooks

話さないこと

• React HooksのAPIの詳細

フックとは、関数コンポーネントに
state やライフサイクルといった React の機能を “接続する (hook into)” ための関数です。

フックの導入 – React

メリット

• ステートを持ったロジックを、コンポーネントの階層構造を変更せずに再利用できる
• 関連する機能に基づいて、小さな関数に分割できる
• クラスから脱却することで、人にも機械にも理解しやすくできる

メリット

• ステートを持ったロジックを、コンポーネントの階層構造を変更せずに再利用できる
• 関連する機能に基づいて、小さな関数に分割できる
• クラスから脱却することで、人にも機械にも理解しやすくできる

React Hooks以前

• コンポーネントの階層構造が増える (Wrapper Hell)
  • コードの可読性が下がる
  • DevTools利用時に余分なコンポーネントが見えてしまう

React Hooksなら

• コンポーネントの階層構造が変わらない
• 状態、ロジック、ライフサイクルをHooksとして抽出できる
  • 再利用性を高める (e.g. HooksAPIを使ったOSS)
  • 単独でテストしやすい

メリット

• ステートを持ったロジックを、コンポーネントの階層構造を変更せずに再利用できる
• 関連する機能に基づいて、小さな関数に分割できる
• クラスから脱却することで、人にも機械にも理解しやすくできる

React Hooks以前

• 関数の凝集度がライフサイクルの実行タイミングに依存

React Hooksなら

• 機能単位でまとめられるため、関数の凝集度が向上する

ログの処理が1つのモジュールにまとまる

タイマーの処理が1つのモジュールにまとまる

メリット

• ステートを持ったロジックを、コンポーネントの階層構造を変更せずに再利用できる
• 関連する機能に基づいて、小さな関数に分割できる
• クラスから脱却することで、人にも機械にも理解しやすくできる

React Hooks以前

• (for 人) クラスベースのため、thisの束縛が必要
  • bind関数
  • パブリッククラスフィールド構文 (提案中の構文)
• (for 機械) 事前コンパイルなどのコード最適化での効果がいまいち

React Hooksなら

• (for 人) thisを使わないでいい
• (for 機械) クラスに比べて最適化しやすい

• Hooksによって関数コンポーネントで、stateやライフサイクルを扱えるようになった
• 主なメリットは、以下のものがある
  • ステートを持ったロジックを、コンポーネントの階層構造を変更せずに再利用できる
  • 関連する機能に基づいて、小さな関数に分割できる
  • クラスから脱却することで、人にも機械にも理解しやすくできる