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

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関数を出し分けることができるため、テストが書きやすい使い時を見極めるのは大変だが、導入するとコードの読みやすさが上がったり、記述ミスを減らすことが出来る

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

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

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

akatsuki1910

More Decks by akatsuki1910

Featured

Transcript