はじめに
自身の忘備録として投稿しています。
Reactの公式ドキュメントを読んで、覚えておいた方がいいなって感じた点の雑なメモ集です。
メモ集
・コンポーネントは純関数に保つ
純関数とは、同じ入力には毎回同じ出力をして、レンダー前に存在するオブジェクトや変数を変更しないもの
・レンダーは厨房での料理みたいなもの
表示はDOMへのコミットで、料理を提供するようなこと
・propsに関数を渡す際、関数が実行されてしまう状態で渡したらいけない
だから引数が必要なときは、無名関数で包んで関数を渡している
・イベントは伝播されるから、それを停止するやつもある
・イベントハンドラは純関数である必要がなく、副作用を持っても良い
State周り
・コンポーネントは初回と、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周り
・コンポーネントに値を持たせたいけど、レンダーをトリガーしたくない場合はRefが使える
stateはレンダーをトリガーしてしまう
・ノードにフォーカスしたり、スクロールさせたり、サイズや位置の測定にDOMを直接操作する必要がある
→Refの出番
・情報がイベントハンドラ内のみ必要で、再レンダー不要の時はRefが有効
・以下のようにすると、myRef.currentに対応するDOM(この場合はdiv)を入れることができる
<div ref={myRef}>
・基本的にRefは独自コンポーネントには割り当てない
Effect周り
・何かを変える時は基本イベントハンドラを使う、useEffectは最終手段
・useEffectは外部システムとreactを同期させるのに使われることがある
エフェクトはブラウザ API、サードパーティのウィジェット、ネットワークなど外部システムとの同期に使われる
・エフェクトはコミットの最後、画面の更新後に実行される
・アンマウント関数の不足を認識しやすいように、開発環境ではuseEffectがマウント時に2回実行される
・イベントのリッスンや、何らかへの接続をuseEffect内で行い、クリーンアップ関数がなければそれが積み重なってしまう
・アプリケーションの初期化はコンポーネントの外に置く、これでブラウザがページを読み込んだ時に一度だけ実行される、使いすぎは注意
・stateやpropsの変更を監視するためにuesEffectを使う必要はない
→非効率だし、stateが変更された時にレンダーがトリガされるからuseEffectがなくても更新される
・処理が重くて、特定のstateの変更のみにその処理を行いたい場合はuseMemoを使う
おわりに
気になった点があれば、まだ書き足していくと思います。
知ったつもりでいても、実際読んでみると理解が深まって楽しいですね。