Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reactのチュートリアルをしよう3
Search
akatsuki1910
December 05, 2023
0
13
Reactのチュートリアルをしよう3
akatsuki1910
December 05, 2023
Tweet
Share
More Decks by akatsuki1910
See All by akatsuki1910
後輩に伝えたいこと
akatsuki1910
0
2
難解(かもしれない)言語
akatsuki1910
1
28
クソドメインを取ろう
akatsuki1910
0
27
Reactのチュートリアルをしよう2
akatsuki1910
0
13
HTMLとCSSとコンポーネント
akatsuki1910
0
17
Reactのチュートリアルをしよう
akatsuki1910
0
16
そのコレクション合ってる?
akatsuki1910
0
20
第3回 TypeScriptを使おう
akatsuki1910
0
10
第2回 TypeScriptを使おう
akatsuki1910
0
21
Featured
See All Featured
Visualization
eitanlees
145
15k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
It's Worth the Effort
3n
183
27k
How GitHub (no longer) Works
holman
310
140k
Music & Morning Musume
bryan
46
6.2k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Agile that works and the tools we love
rasmusluckow
327
21k
Why Our Code Smells
bkeepers
PRO
334
57k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Transcript
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関数を出し分けることができるため、テストが書きやすい 使い時を見極めるのは大変だが、導入するとコードの読みやすさが上がったり、記述ミ スを減らすことが出来る
課題 課題 可能な限りメモ化してください また、再レンダリング回数を極力落としてください