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

勝敗を表示 calculateWinner関数を用いて、勝敗が確定してい たら、勝敗を表示してまるばつを表示する機能を止 める 

タイムトラベル機能を用意する 盤面を戻す機能を作る 内容としては、配列を毎度保存して、それを呼び出す 

記録用の配列を作る 記録用の配列を作る ちなみにArrayにnew演算子を付ける必要はない 

記録配列に保存 関数を用意してあげて、それをボード側で毎度呼び出す それが呼ばれたら親側で盤面を保存し、次の手番に渡す 

useCallback メモ化されたコールバック関数を返す 他の場合には関数をラップするメリットはありませんuseCallback。これを行っても大きな 害はありません。そのため、チームによっては、個々のケースについて考えず、可能な 限りメモ化することを選択します。欠点は、コードが読みにくくなることです。また、すべて のメモ化が効果的であるわけではありません。コンポーネント全体のメモ化を解除する には、「常に新しい」単一の値で十分です。 https://react.dev/reference/react/useCallback 

useCallback 概念としては、関数のメモ化 useMemoは値のメモ化に対して、useCallbackは関数のメモ化 https://react.dev/reference/react/useCallback 

useCallbackの使用例 右の例だと、handleClickはレン ダリングされた時にしか更新され ないため、Appのボタンを押した としても、Childは再レンダリング されない 

記録を取り出す 記録配列を回し、ジャンプする ためのボタンを用意する 

keyをちゃんとつけよう キーは兄弟間で一意である必要があります。ただし、異なる配列のJSX ノードに同じ キーを使用しても問題ありません。 キーを変更したり、その目的を損なったりしてはなりません。レンダリング中にそれらを 生成しないでください。 => 配列を回した時のインデックスだけ入れるな => プレフィックスも意味ない https://zenn.dev/t_keshi/books/you-and-cleaner-react/viewer/gathering-confusing-key 

なんでつける必要があるの 例えばその要素の中身が変わった時、そのDOMが「削除」されたのか「値が変わっただ け」なのかを判別出来ないため デスクトップ上のファイルに名前がなかったと想像してください。代わりに、最初のファイ ル、2 番目のファイルなどの順序で参照します。慣れることはできますが、ファイルを削 除すると混乱するでしょう。2 番目のファイルは最初のファイルになり、3 番目のファイル は 2 番目のファイルになり、以下同様になります。 https://zenn.dev/t_keshi/books/you-and-cleaner-react/viewer/gathering-confusing-key 

keyをちゃんとつけよう keyをインデックスだけを用いている場合、毎度DOMの再生成が行われる可能性があ るため、描画が重くなる場合がある 軽量化のためにメモ化を計る前に、きちんとkeyをつける習慣を心がけましょう 

ジャンプ先の関数の中身を作る 手番を戻し、まるばつの順番も変える 

クリックした時の中身を変える 履歴を保存し、手番を次に変える 

完成！ 状態管理を関数内から外に出す これにより各処理が単純になり、読みやすくなる これにより、まるばつゲームの完成である 

useReducer(使わない時) 

useReducer(使う時) 

何がうれしい? 処理をstateと紐づけれるため、共通化をしやすい また、callback->stateとしないといけないのがdispatchだけですむため、コードが簡略 化される reducer関数を出し分けることができるため、テストが書きやすい 使い時を見極めるのは大変だが、導入するとコードの読みやすさが上がったり、記述ミ スを減らすことが出来る 

課題 課題 可能な限りメモ化してください また、再レンダリング回数を極力落としてください