Reactのチュートリアルをしよう3

Transcript

1. Reactのチュートリアルをしよう3 らり
2. 勝敗を表示 calculateWinner関数を用いて、勝敗が確定してい たら、勝敗を表示してまるばつを表示する機能を止 める
3. タイムトラベル機能を用意する 盤面を戻す機能を作る 内容としては、配列を毎度保存して、それを呼び出す
4. 記録用の配列を作る 記録用の配列を作る ちなみにArrayにnew演算子を付ける必要はない
5. 記録配列に保存 関数を用意してあげて、それをボード側で毎度呼び出す それが呼ばれたら親側で盤面を保存し、次の手番に渡す
6. useCallback メモ化されたコールバック関数を返す 他の場合には関数をラップするメリットはありませんuseCallback。これを行っても大きな 害はありません。そのため、チームによっては、個々のケースについて考えず、可能な 限りメモ化することを選択します。欠点は、コードが読みにくくなることです。また、すべて のメモ化が効果的であるわけではありません。コンポーネント全体のメモ化を解除する には、「常に新しい」単一の値で十分です。 https://react.dev/reference/react/useCallback
7. useCallback 概念としては、関数のメモ化 useMemoは値のメモ化に対して、useCallbackは関数のメモ化 https://react.dev/reference/react/useCallback
8. useCallbackの使用例 右の例だと、handleClickはレン ダリングされた時にしか更新され ないため、Appのボタンを押した としても、Childは再レンダリング されない
9. 記録を取り出す 記録配列を回し、ジャンプする ためのボタンを用意する
10. keyをちゃんとつけよう キーは兄弟間で一意である必要があります。ただし、異なる配列のJSX ノードに同じ キーを使用しても問題ありません。 キーを変更したり、その目的を損なったりしてはなりません。レンダリング中にそれらを 生成しないでください。 => 配列を回した時のインデックスだけ入れるな => プレフィックスも意味ない https://zenn.dev/t_keshi/books/you-and-cleaner-react/viewer/gathering-confusing-key
11. なんでつける必要があるの 例えばその要素の中身が変わった時、そのDOMが「削除」されたのか「値が変わっただ け」なのかを判別出来ないため デスクトップ上のファイルに名前がなかったと想像してください。代わりに、最初のファイ ル、2 番目のファイルなどの順序で参照します。慣れることはできますが、ファイルを削 除すると混乱するでしょう。2 番目のファイルは最初のファイルになり、3 番目のファイル は 2 番目のファイルになり、以下同様になります。 https://zenn.dev/t_keshi/books/you-and-cleaner-react/viewer/gathering-confusing-key
12. keyをちゃんとつけよう keyをインデックスだけを用いている場合、毎度DOMの再生成が行われる可能性があ るため、描画が重くなる場合がある 軽量化のためにメモ化を計る前に、きちんとkeyをつける習慣を心がけましょう
13. ジャンプ先の関数の中身を作る 手番を戻し、まるばつの順番も変える
14. クリックした時の中身を変える 履歴を保存し、手番を次に変える
15. 完成！ 状態管理を関数内から外に出す これにより各処理が単純になり、読みやすくなる これにより、まるばつゲームの完成である
16. useReducer(使わない時)
17. useReducer(使う時)
18. 何がうれしい? 処理をstateと紐づけれるため、共通化をしやすい また、callback->stateとしないといけないのがdispatchだけですむため、コードが簡略 化される reducer関数を出し分けることができるため、テストが書きやすい 使い時を見極めるのは大変だが、導入するとコードの読みやすさが上がったり、記述ミ スを減らすことが出来る
19. 課題 課題 可能な限りメモ化してください また、再レンダリング回数を極力落としてください