🙌
なんとなく理解するReact Hooks
Hooksをざっと把握中
1. useState
ステートの値が更新されることで、差分描画で再レンダリングする。
ステートの値を子コンポーネントに渡して、再レンダリングする。
2. useEffect
副作用フックといい、「〇〇が✗✗後に読み出す...」といったことが可能
3. useContext
propsをバケツリレーで渡さなくても下の階層で
Contextに収容されているデータにアクセスできる。
4. useRef
指定した要素の情報を参照する(DOMを参照する)
またuseRefでは、useStateのようにコンポーネント内での値を保持することが可能
5. useReducer
useStateでもほぼ同じ処理を実現できる。
しかし、stateが複数の値にまたがるような複雑なロジックがある場合や
前回のstateに基づいてstateを更新する場合などに力を発揮する。(一旦なんとなくの理解でOK)
6. useMemo
必要なときだけ処理を実行して、
必要がないときは処理が走らないようにメモ化する。
メモ化した場合は値をメモリーに保存する。
実用例としてはパファーマンスを上げたい場合などに使用する?
7. カスタムフック
処理をコンポーネントに直接書くのではなく、別ファイルに切り出して
新しいHooksとして定義した関数のことをカスタムフックという。
今回はボタンを押したらローカルストレージに値を保存するカスタムフックを実装。
Discussion