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

Transcript

1. Reactのチュートリアルをしよう らり
2. なにすんの? 昔からあるチュートリアル、Tic-Tac-Toe 今回は新しいやつをする ↓古いやつ https://ja.legacy.reactjs.org/tutorial/tutorial.html ↓新しいやつ https://react.dev/learn/tutorial-tic-tac-toe
3. なに話すの? チュートリアルはあくまで構文を理解するためのものなので、細かいところまでは考慮さ れてない そのため、チュートリアルにそって、開発をするのであれば気をつけるべき点などを知り つつ、Reactについて学ぶ そのため、チュートリアルをすすめるのにめちゃくちゃ牛歩です
4. Setup for the tutorial ×が入った四角を表示させるコード https://codesandbox.io/s/vy6j3f?file=/App.js&utm_medium=sandpack
5. クラスコンポーネントと関数コンポーネント いいえ。React からクラスを削除する予定はありません — 我々はみなプロダクトを世に 出し続ける必要があり、クラスを書き換えている余裕はありません。新しいコードでフック を試すことをお勧めします。 => 強い意思がなければ関数コンポーネントでかく https://ja.legacy.reactjs.org/docs/hooks-faq.html#do-i-need-to-rewrite-all-my-class-components
6. 命名 コンポーネントとファイル名を同じにする また、拡張子はjsxかtsxを使う => 逆に、コンポーネントやcontextといった、Reactでのファイル(?)でなければjsxかtsx の拡張子を使わない/使う必要がない https://github.com/airbnb/javascript/tree/master/react#naming
7. 四角を並べていく 同じコードを2つ書く Reactのコンポーネントは単一のJSX要素を返す必要があるので、fragmentを用いて 囲ってあげる必要がある
8. 9つ並べる SquareからBoardに名前を変える
9. Squareを別コンポーネントにする 今回はこのコンポーネントを派生したり、組み合わせて使うわ けではない分割する これは、ボードと各マスは責務が異なるためである この分割方法はデザインパターンによって異なるため、プロ ジェクトによってルールを知る必要がある
10. valueを入れれるようにする valueというpropsを用いて、値が表示されるようにする
11. クリックできるようにする これにより、「clicked!」が表示されるようになる
12. useCallback useCallBackは、メモ化されたコールバック関数を返します。メモ化とは同じ入力が再度 発生した時に、キャッシュした結果を返すことです => どゆこと? https://tyotto-good.com/react/use-callback
13. その前に React Hooksは、Reactのクラス記法を使わずともReactを使えるようにするもの useCallbackや、useStateなどがそれに当たる => そのため、大体の機能はクラス記法時代のライフサイクルを大まかに知っておく必要 がある
14. https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
15. だいた～い理解してると分かること • componentDidMount ◦ コンポーネントがマウントされた（ツリーに挿入された）直後 • componentDidUpdate ◦ 更新が行われた直後 => つまり、実行タイミングが2つある
16. だいた～い理解してると分かること depsに値が入ってるか入っていないかによって、その2つの書き方を使い分けれる 値が入っていない => componentDidMount 値が入っている => その値が更新された時 => componentDidUpdate
17. だいた～い理解してると分かること ReactはObject.isを用いて、同一のものかを比較をしているため(内容は後日)、関数や オブジェクトであれば、同一メモリのものでないと同じものであると認識されない そのため、hooksを用いてないと毎度違うオブジェクトが生成されてしまうため、再レンダ リング云々の問題に直面することになる またメモリ効率的にも悪い(詳しい話は難しいので省略)ので、基本的にuseCallbackを 用いた方がいい https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is
18. なんで素の関数を書いてはいけないの? componentDidMountとcomponentDidUpdateの2つをあわせもつ物が出来るため、再 レンダリングが行われる度に関数が更新される あとは先ほどの通り、デメリットがどんどん出てくることになる
19. 頭に入れておくこと かつては最適化をするものが多くなりすぎると重くなることが問題視されていた ただ、その数は相当数なものでないと起こりえないため、気にするものでもない また、本当にいらないのなら外すだけでいいので、最初からuseCallbackなどを書いて おいた方がいい そのため、「必ず使おう」という強制するものではない https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/ https://zenn.dev/takepepe/articles/react-context-rerender
20. 課題 課題 今のままでも問題ないですが、keyが何かを回すとき、keyが必要になります このとき、keyを付けるにはどのようにすればいいでしょうか