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のチュートリアルをしよう2
Search
akatsuki1910
November 21, 2023
0
13
Reactのチュートリアルをしよう2
akatsuki1910
November 21, 2023
Tweet
Share
More Decks by akatsuki1910
See All by akatsuki1910
後輩に伝えたいこと
akatsuki1910
0
2
難解(かもしれない)言語
akatsuki1910
1
28
Reactのチュートリアルをしよう3
akatsuki1910
0
13
クソドメインを取ろう
akatsuki1910
0
27
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
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Site-Speed That Sticks
csswizardry
0
28
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
How GitHub (no longer) Works
holman
310
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Designing for humans not robots
tammielis
250
25k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Transcript
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を使った場合を用意してください