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

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

valueを入れれるようにする valueというpropsを用いて、値が表示されるようにする

クリックできるようにするこれにより、「clicked!」が表示されるようになる

クリックして文字が表示されるようにする useStateを用意し、そこに値を入れることでXを表示させることが出来る

なんでuseStateを使う必要があるの? 画像のようなコードがあったとき、ccの値が増えたとしても、毎度Boardコンポーネントが再レンダリングされるため、ccの値は初期化されるまた、useStateの初期値は初回レンダリング時にのみ更新されるため、再レンダリングされても値は保持されたままである

なんでuseStateを使う必要があるの? ただ、useStateの初期値にpropsを入れていた場合、初回時にのみしか反映されないため、propsの値を stateの初期値にしたい場合はuseEffectなどを用いて stateに入れる必要があるそのため、レンダリングされた最初だけ読まれる値だということを知っておく必要がある

useStateの初期値は入れよう useStateの値を入れないと、初期値はundefinedになるこれは暗黙的に型もundefinedになり、指定した型と違った結果になる下の例では、itemはnumber|undefined型になる(ジェネリクスの話) そのため、指定した型の通りのstateを用意するためにも、型を指定したらその型にあった初期値を入れておくと、間違えることが少なくなる

stateをBoard側で持つ handleClickを親で持つようにする

stateと配列の話 stateの変化をObject.isで見ているため、同一メモリのオブジェクトの変化には対応できないそのため、一度配列やオブジェクトをコピーしてから変更を行うか、非破壊的変更を行うことでsetする必要がある左はsetされないが、右はsetされる

Object.is https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is

まるばつゲームっぽくする xIsNextをフラグとして、まるとばつを繰り返し表示させる

勝ちかを判定する配列を回して、縦横ななめが揃えば、それのまるばつを返すそれ以外ならnullを返す

その関数、コンポーネント内にいる? hookに関わらない関数や定数はそもそもコンポーネント内に書く必要がないレンダリング毎に宣言されるため、外に出した方がよかったりするあなたのその定数、コンポーネント内に入れる必要はありますか?

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

useMemo useMemoパフォーマンスの最適化としてのみ使用してください。これがないとコードが機能しない場合は、根本的な問題を見つけて、まずそれを修正してください。その後、 useMemoパフォーマンスを向上させるために追加することができます => 基本的に使う必要がない https://react.dev/reference/react/useMemo

ただ? 「使わなくていい」とされるのはメモ化をするための意味がない場合が多かったり、使った方がパフォーマンスが落ちるからだったりするそれは大規模サービスとかに当てはまるものであり、普通に使ってる分には誤差にしかならないので、使ってなくて取り返しがつかなくなる前に積極的に使ってよいというか可能な限り使っていいって公式が書いてるから素でロジック書かない方がいい https://react.dev/reference/react/useMemo

注意書き「reactStrictMode」がtrueだと中身が2回実行されるそのため、実行されるとバグが発生するから困るからとこのモードをfalseにする人がいるが、そもそもreactは純粋関数で作るべきであるので、バグが発生している時点でロジックがおかしいので反省すべき

React.memo useMemoは値に対してだが、React.memoはコンポーネントに対してのメモ化これも基本的に使う必要がないまた、全てにラップすることによるメリットはほぼないむしろメモ化することでよりよくなる場合があるのであれば、それの大半は設計ミスの賜物なので、コードを見直す必要があるそもそも公式サイトの記述をきちんと読まず、正しく理解できていない状態で使用しているプログラマーが非常に多い印象があります。 https://ja.react.dev/reference/react/memo

課題課題1 このままではボタンを押すたびに重い処理が走りますこれを可能な限り軽量化を計ってくださいまた、再レンダリングの数も極力抑えてください答えはuseMemoを使った場合と、React.memoを使った場合を用意してください

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

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

akatsuki1910

More Decks by akatsuki1910

Featured

Transcript