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

Transcript

1. Reactのチュートリアルをしよう2 らり
2. valueを入れれるようにする valueというpropsを用いて、値が表示されるようにする
3. クリックできるようにする これにより、「clicked!」が表示されるようになる
4. クリックして文字が表示されるようにする useStateを用意し、そこに値を入れることでXを表 示させることが出来る
5. なんでuseStateを使う必要があるの? 画像のようなコードがあったとき、ccの値が増えたとし ても、毎度Boardコンポーネントが再レンダリングされる ため、ccの値は初期化される また、useStateの初期値は初回レンダリング時にのみ 更新されるため、再レンダリングされても値は保持され たままである
6. なんでuseStateを使う必要があるの? ただ、useStateの初期値にpropsを入れていた場合、 初回時にのみしか反映されないため、propsの値を stateの初期値にしたい場合はuseEffectなどを用いて stateに入れる必要がある そのため、レンダリングされた最初だけ読まれる値だと いうことを知っておく必要がある
7. useStateの初期値は入れよう useStateの値を入れないと、初期値はundefinedになる これは暗黙的に型もundefinedになり、指定した型と違った結果になる 下の例では、itemはnumber|undefined型になる(ジェネリクスの話) そのため、指定した型の通りのstateを用意するためにも、型を指定したらその型にあっ た初期値を入れておくと、間違えることが少なくなる
8. stateをBoard側で持つ handleClickを親で持つようにする
9. stateと配列の話 stateの変化をObject.isで見ているため、同一メモリのオブジェクトの変化には対応でき ない そのため、一度配列やオブジェクトをコピーしてから変更を行うか、非破壊的変更を行う ことでsetする必要がある 左はsetされないが、右はsetされる
10. Object.is https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is
11. まるばつゲームっぽくする xIsNextをフラグとして、まるとばつを 繰り返し表示させる
12. 勝ちかを判定する 配列を回して、縦横ななめが 揃えば、それのまるばつを返 す それ以外ならnullを返す
13. その関数、コンポーネント内にいる? hookに関わらない関数や定数はそもそもコンポーネント内に書く必要がない レンダリング毎に宣言されるため、外に出した方がよかったりする あなたのその定数、コンポーネント内に入れる必要はありますか?
14. 勝敗を表示 calculateWinner関数を用いて、勝敗が確定してい たら、勝敗を表示してまるばつを表示する機能を止 める
15. useMemo useMemoパフォーマンスの最適化としてのみ使用してください。これがないとコードが機 能しない場合は、根本的な問題を見つけて、まずそれを修正してください。その後、 useMemoパフォーマンスを向上させるために追加することができます => 基本的に使う必要がない https://react.dev/reference/react/useMemo
16. ただ? 「使わなくていい」とされるのはメモ化をするための意味がない場合が多かったり、使っ た方がパフォーマンスが落ちるからだったりする それは大規模サービスとかに当てはまるものであり、普通に使ってる分には誤差にしか ならないので、使ってなくて取り返しがつかなくなる前に積極的に使ってよい というか可能な限り使っていいって公式が書いてるから素でロジック書かない方がいい https://react.dev/reference/react/useMemo
17. 注意書き 「reactStrictMode」がtrueだと中身が2回実行される そのため、実行されるとバグが発生するから困るからとこのモードをfalseにする人がい るが、そもそもreactは純粋関数で作るべきであるので、バグが発生している時点でロ ジックがおかしいので反省すべき
18. React.memo useMemoは値に対してだが、React.memoはコンポーネントに対してのメモ化 これも基本的に使う必要がない また、全てにラップすることによるメリットはほぼない むしろメモ化することでよりよくなる場合があるのであれば、それの大半は設計ミスの賜 物なので、コードを見直す必要がある そもそも公式サイトの記述をきちんと読まず、正しく理解できていない状態で使用してい るプログラマーが非常に多い印象があります。 https://ja.react.dev/reference/react/memo
19. 課題 課題1 このままではボタンを押すたびに重い処理が走ります これを可能な限り軽量化を計ってください また、再レンダリングの数も極力抑えてください 答えはuseMemoを使った場合と、React.memoを使った場合を用意してください