最終更新:2024-04-17 (水) 12:14:19 (32d)  

React/レンダリング
Top / React / レンダリング

基本

仕組み

  • React DOM は要素とその子要素を以前のものと比較し、DOM を望ましい状態へと変えるのに必要なだけの DOM の更新を行います。

メモ

  • 大抵の React アプリケーションは root.render() を一度しか呼び出しません

React/関数コンポーネント

  • stateが更新されたときに頭から処理が実行され、JSXで記述したReact要素がreturnされる
  • useStateの初期値の設定はマウント時のみ

React/クラスコンポーネント

レンダリング

初期レンダリング

再レンダリングの条件

  • stateが更新されたコンポーネント
  • propsが更新されたコンポーネント
  • 再レンダリングされたコンポーネント配下のコンポーネント全て

useState

値が更新されない

  • 理由:setStateで値が更新されるのは関数が呼び出された後

React/メモ化

  • propsに変更がない限り再レンダリングされないようになる

関数を子コンポーネントに渡す場合

  • 何もしないと再レンダリングでコードが実行されるたびに新しい関数が再生成される
    • propsが変化してしまい、子要素もレンダリングされてしまう
  • useCallbackを使い関数をメモ化

React/条件付きレンダリング