【雑メモ】Reactの公式ドキュメントを読んでみて

Posted at 2024-05-30

はじめに

自身の忘備録として投稿しています。
Reactの公式ドキュメントを読んで、覚えておいた方がいいなって感じた点の雑なメモ集です。

・コンポーネントは純関数に保つ
純関数とは、同じ入力には毎回同じ出力をして、レンダー前に存在するオブジェクトや変数を変更しないもの

・レンダーは厨房での料理みたいなもの
　表示はDOMへのコミットで、料理を提供するようなこと

・propsに関数を渡す際、関数が実行されてしまう状態で渡したらいけない
　だから引数が必要なときは、無名関数で包んで関数を渡している

・イベントは伝播されるから、それを停止するやつもある

・イベントハンドラは純関数である必要がなく、副作用を持っても良い

・コンポーネントは初回と、stateの変更時にレンダーされる

・ローカル変数の変更はレンダーをトリガーしない、レンダー間で値を保持しない

・stateのセットは、現在のstateを変更するのではなく、レンダーをトリガーするだけ
stateはその値自体を変えてる訳ではなく、再レンダー中に置き換えられている

・イベントハンドラ内の全てのコードが実行されるまで、再レンダーは待機される
　→バッチ処理

・更新用関数
　n => n + 1

・stateは読み取り専用で利用する

・オブジェクトや配列は値を直接変えることもできるけど、それはせず置き換えるべき
値が直接変えられても、stateセット関数が使われてないから再レンダーされないため、動作が不確かになる

・popやpushなどのミュータブルなメソッドは使うべきじゃない、スプレッド構文とかfilterをつかう

・スプレッド構文は深さが1しかない、ネストされてる場合はそれごとに書く必要がある

・不要なstateの見分け方
　stateで矛盾が生じないか　
　他のstateから得られる値ではないか
　他のstateの逆の値ではないか

・同時に更新する２つのstateはまとめてしまう、座標のx.yとか

・重複を持つstateは避ける

・コンポーネントがUIツリーのなかで同じ位置にレンダーされてる間はstateを保持する

・コンポーネントは常にトップレベルで定義

・keyによって、位置が同じであっても異なったコンポーネントだと認識させれる

・stateの穴掘り作業（深いstateの受け渡し）の対策として、コンテクストが使える　

・コンポーネントに値を持たせたいけど、レンダーをトリガーしたくない場合はRefが使える
stateはレンダーをトリガーしてしまう

・ノードにフォーカスしたり、スクロールさせたり、サイズや位置の測定にDOMを直接操作する必要がある
→Refの出番

・情報がイベントハンドラ内のみ必要で、再レンダー不要の時はRefが有効

・以下のようにすると、myRef.currentに対応するDOM(この場合はdiv)を入れることができる

<div ref={myRef}>

・基本的にRefは独自コンポーネントには割り当てない

・何かを変える時は基本イベントハンドラを使う、useEffectは最終手段

・useEffectは外部システムとreactを同期させるのに使われることがある
エフェクトはブラウザ API、サードパーティのウィジェット、ネットワークなど外部システムとの同期に使われる

・エフェクトはコミットの最後、画面の更新後に実行される

・アンマウント関数の不足を認識しやすいように、開発環境ではuseEffectがマウント時に2回実行される

・イベントのリッスンや、何らかへの接続をuseEffect内で行い、クリーンアップ関数がなければそれが積み重なってしまう

・アプリケーションの初期化はコンポーネントの外に置く、これでブラウザがページを読み込んだ時に一度だけ実行される、使いすぎは注意

・stateやpropsの変更を監視するためにuesEffectを使う必要はない
→非効率だし、stateが変更された時にレンダーがトリガされるからuseEffectがなくても更新される

・処理が重くて、特定のstateの変更のみにその処理を行いたい場合はuseMemoを使う

気になった点があれば、まだ書き足していくと思います。

知ったつもりでいても、実際読んでみると理解が深まって楽しいですね。