chapter 4 フックによる状態管理

[k-hitoshi]

chapter 4　フックによる状態管理

学習期間07月18日〜7月29日

• [x] ① 使ってみる
• [x] ② 関数コンポーネントを使う
• [x] ③ 副作用フックの利用
• [x] ④ 独自フックを作る
• [x] ⑤ ステートフックの永続化
• [x] ⑥ 簡易メモ作成 ←今ここ

[k-hitoshi]

07月20日(水)

「フックを使う」を読み進めて実際に書いてみた

感想

• state(Conponentを継承したクラスに用意された機能) と Hooks(関数コンポーネントで使用するstateのようなもの)を イメージして学習できた
• Componentの機能切り分け
• useStateの使い方を知る
• フックステートは1つの値を設定するのみ
• 関数コンポーネントは常にリロードされる

[k-hitoshi]

07月20日

「関数コンポーネント間でフックを使う」実践

感想

• 関数コンポーネント間のステートフックの扱いについて学ぶ（属性更新）
• 親から子へのステート操作には慣れているが、子から親への操作に少し慣れが必要と感じた（内容は理解できた）
• フォームを用いた表示についても学習した

[k-hitoshi]

07月21日(日)

「副作業フック利用」熟読と実践

学習内容

• 表示更新時に指定関数が実行される
• useEffectで表示更新の折、setMsgするよう設定されていると無限に呼び出されてしまう。
• どのステートが更新された時に実行されるかを意識する必要あり（難解）
• 再度タイミングを見て読み直す必要があると感じた

[k-hitoshi]

07月25日(月)

「独自フック」熟読

学習内容

• 独自フックの定義方法について学ぶ
• 関数コンポーネントの一部機能を分割することで汎用的に扱えるようしたと理解
• 返却された関数をJSXの内で呼び出することが可能
• 処理内容を引数として渡すの部分で困惑したが、相応に理解出来た 　 明日実践を通して理解を深めます

[k-hitoshi]

07月27日(水)

「独自フック」実践

学習内容

• 独自Hookは、stateHookのように値を得る変数と変更する関数という形に捉われない
• 処理の順序を意識して学習できた
• 繰り返し練習が必要だと感じた

[k-hitoshi]

07月30日(土)

「ステートフック永続化」熟読と実践

学習内容

• ステートの値は通常リロードすると消える
• localStorageを用いた値の保管とJSONデータの描画について
• 独自フックについて理解が深まった