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

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

なにすんの? 昔からあるチュートリアル、Tic-Tac-Toe 今回は新しいやつをする ↓古いやつ https://ja.legacy.reactjs.org/tutorial/tutorial.html ↓新しいやつ https://react.dev/learn/tutorial-tic-tac-toe

なに話すの? チュートリアルはあくまで構文を理解するためのものなので、細かいところまでは考慮されてないそのため、チュートリアルにそって、開発をするのであれば気をつけるべき点などを知りつつ、Reactについて学ぶそのため、チュートリアルをすすめるのにめちゃくちゃ牛歩です

Setup for the tutorial ×が入った四角を表示させるコード https://codesandbox.io/s/vy6j3f?file=/App.js&utm_medium=sandpack

クラスコンポーネントと関数コンポーネントいいえ。React からクラスを削除する予定はありません — 我々はみなプロダクトを世に出し続ける必要があり、クラスを書き換えている余裕はありません。新しいコードでフックを試すことをお勧めします。 => 強い意思がなければ関数コンポーネントでかく https://ja.legacy.reactjs.org/docs/hooks-faq.html#do-i-need-to-rewrite-all-my-class-components

命名コンポーネントとファイル名を同じにするまた、拡張子はjsxかtsxを使う => 逆に、コンポーネントやcontextといった、Reactでのファイル(?)でなければjsxかtsx の拡張子を使わない/使う必要がない https://github.com/airbnb/javascript/tree/master/react#naming

四角を並べていく同じコードを2つ書く Reactのコンポーネントは単一のJSX要素を返す必要があるので、fragmentを用いて囲ってあげる必要がある

9つ並べる SquareからBoardに名前を変える

Squareを別コンポーネントにする今回はこのコンポーネントを派生したり、組み合わせて使うわけではない分割するこれは、ボードと各マスは責務が異なるためであるこの分割方法はデザインパターンによって異なるため、プロジェクトによってルールを知る必要がある

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

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

useCallback useCallBackは、メモ化されたコールバック関数を返します。メモ化とは同じ入力が再度発生した時に、キャッシュした結果を返すことです => どゆこと? https://tyotto-good.com/react/use-callback

その前に React Hooksは、Reactのクラス記法を使わずともReactを使えるようにするもの useCallbackや、useStateなどがそれに当たる => そのため、大体の機能はクラス記法時代のライフサイクルを大まかに知っておく必要がある

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

だいた～い理解してると分かること • componentDidMount ◦ コンポーネントがマウントされた（ツリーに挿入された）直後 • componentDidUpdate ◦ 更新が行われた直後 =>
つまり、実行タイミングが2つある

だいた～い理解してると分かること depsに値が入ってるか入っていないかによって、その2つの書き方を使い分けれる値が入っていない => componentDidMount 値が入っている => その値が更新された時 => componentDidUpdate

だいた～い理解してると分かること ReactはObject.isを用いて、同一のものかを比較をしているため(内容は後日)、関数やオブジェクトであれば、同一メモリのものでないと同じものであると認識されないそのため、hooksを用いてないと毎度違うオブジェクトが生成されてしまうため、再レンダリング云々の問題に直面することになるまたメモリ効率的にも悪い(詳しい話は難しいので省略)ので、基本的にuseCallbackを用いた方がいい https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is

なんで素の関数を書いてはいけないの? componentDidMountとcomponentDidUpdateの2つをあわせもつ物が出来るため、再レンダリングが行われる度に関数が更新されるあとは先ほどの通り、デメリットがどんどん出てくることになる

頭に入れておくことかつては最適化をするものが多くなりすぎると重くなることが問題視されていたただ、その数は相当数なものでないと起こりえないため、気にするものでもないまた、本当にいらないのなら外すだけでいいので、最初からuseCallbackなどを書いておいた方がいいそのため、「必ず使おう」という強制するものではない https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/ https://zenn.dev/takepepe/articles/react-context-rerender

課題課題今のままでも問題ないですが、keyが何かを回すとき、keyが必要になりますこのとき、keyを付けるにはどのようにすればいいでしょうか

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

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

akatsuki1910

More Decks by akatsuki1910

Featured

Transcript