Zenn
Open5

Reactのドキュメントを隅々まで読む＆理解＆試す

ももみんももみん

✅ react.dev/learn

  • コンポーネントとは、マークアップを返す JavaScript 関数
  • 波括弧を使うことで、逆に JSX の中から JavaScript に「戻る」ことができる
  • JSX の属性 (attribute) の部分から JavaScript に「戻る」こともできる
  • イベントハンドラ関数を呼び出すわけではない、渡すだけ
  • 現在の state (count) と、それを更新するための関数 (setCount)
  • 同じコンポーネントを複数の場所でレンダーした場合、それぞれが独自の state を持つ
  • use で始まる関数は、フック (Hook) と呼ばれる
  • フックはコンポーネントのトップレベル（または他のフック内）でのみ呼び出せる
  • 「state のリフトアップ（持ち上げ）」state をコンポーネント間で共有
ももみんももみん

✅ react.dev/learn/全部

❓ わかんない

props渡すときの記述色々あるけど可読性考えたら何がベストかわかんない

レンダーとは

  • Reactがコンポーネントを呼び出すこと

レンダーのトリガー

  • コンポーネントの初回レンダー。
  • コンポーネント（またはその祖先のいずれか）の state の更新。

バッチ処理

  • イベントハンドラ内のすべてのコードが実行されるまで、React は state の更新処理を待機する
  • 意図的なイベントが複数回発生した場合、それらにまたがったバッチ処理までは行わない
  • 1 つのイベントで複数回 state を更新したい場合更新用関数を使用できる

state 内のオブジェクトの更新

  • 書き換えるのではなく、常に置き換えるべき
  • 再レンダーをトリガするためには、新しいオブジェクトを作成し、それを state セット関数に渡す

再レンダリング

  • 状態（state）の変更
  • 親 (または子/children) の再レンダリング
  • Context の変更
  • React hooks の変更
ももみんももみん

💟 Reactのレンダリング

1. レンダリングのトリガー

  • コンポーネントの初回レンダリング
  • コンポーネントのstateの更新(親たちの更新も含めるよ)
    🚨 再起的に発生する => 意図しない再レンダリングは起こすべきでない
    🚨 基本的にはpropsが変更されたかどうかは関係ない

2. Reactがコンポーネントをレンダー（呼び出す）

  • 初回レンダー => Reactはルートコンポーネントを呼び出す
  • それ以降レンダー => Reactがトリガーされた関数コンポーネントを呼び出す
    🚨 ネストされたコンポーネントが無くなるまでレンダーは続く
    🚨 ツリーのルートから下まで更新が必要なコンポーネントにフラグを立てる

3. ReactがDOMへの変更をコミットする

  • 初回レンダー => appendChild()DOM APIで作成したすべてのDOMノードを画面に表示
  • それ以降レンダー => レンダー中に計算された最小限の操作でDOMを更新（変更）
    🚨 レンダー間で違いがあった場合のみDOMノード変更
ももみんももみん

💟レンダリングの最適化

Shallow Equality(浅い比較)

=> オブジェクトの内容(参照や配列)が異なる値かどうかを確認する
🚨 オブジェクトの属性、配列の要素は考慮しない