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

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

今日やったこと

• Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！

Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！

ざっくりサマリー

• React hooks 16.8以降
• ファンクションコンポーネントで実装していく
• クラスコンポーネントを使わない
• Hooksでファンクショナルコンポーネントでも状態を持てるようにする
• useStateで実現
• Hooks導入前: 状態を持たない場合ファンクショナルコンポーネント → 状態をもたせたくなったらクラスコンポーネントへリファクタリング
• Hooksの導入でクラスコンポーネントを使わなくても状態を持てるようになった

• useState

  • 分割代入で戻り値を受ける使い方がスタンダード(公式ドキュメントにも載ってるやりかた)
  • 戻り値[0]: 状態の初期値
  • 戻り値[1]: 状態を更新するための関数
  • 戻り値[1]はset{戻り値[1]}としてキャメルケースで記述するのが慣習となっている
  • useState使ったほうがシンプルでわかりやすいーーー
  • set関数は引数に関数を受けることができる → 複雑な操作もできる
  • useStateの引数はオブジェクトを受けられる
  • useState完全に理解した

• useEffect

  • ライフサイクルメソッドの一部を代替
  • 引数に関数を受ける
  • useEffectはレンダリングの後で実行される ≒ componentDidMountメソッド componentDidUpdateメソッド
  • 初回のレンダリングのときだけ実行したい場合 → 第二引数に空の配列を与える
  • 特定のデータをトリガーにしたい場合 → 第二引数の配列に入れてやる

• 状態遷移表

  • 入力と状態のマトリクス
• Reactでは外部トリガーのことをActionという
• Actionの種別をtypeという

• Reducer

  • 純粋関数 → 同じ引数であればいつ,何度実行しても同じ結果を返す
• デザインのフレームワークなどはなるべく早期に取り入れないと導入コストが大きくなってしまう

まとめ

HyperTextCandyでもやったけどやっぱりHooks使った方が圧倒的にわかりやすい。
昨日,職場の方でReactやってた人からもHooks使って状態管理した方がいいと教えてもらったしHooks使っていくのが良さげ。
あとは,クラスコンポーネントは使わない方針で関数コンポーネントで書いていったほうがシンプルに書けるなという印象。
Reactがわかってきた気がする。そんな土曜日。

それではまた明日。