最終更新:2024-04-17 (水) 12:14:19 (2d)
React/レンダリング
基本
const root = ReactDOM.createRoot( document.getElementById('root') ); const element = <h1>Hello, world</h1>; root.render(element);- ReactDOM.createRoot
- ReactDOM.render
仕組み
- React DOM は要素とその子要素を以前のものと比較し、DOM を望ましい状態へと変えるのに必要なだけの DOM の更新を行います。
メモ
- 大抵の React アプリケーションは root.render() を一度しか呼び出しません
React/関数コンポーネント
- stateが更新されたときに頭から処理が実行され、JSXで記述したReact要素がreturnされる
- useStateの初期値の設定はマウント時のみ
React/クラスコンポーネント
- TODO:React.Component.renderが呼ばれるタイミング
レンダリング
初期レンダリング
再レンダリングの条件
- stateが更新されたコンポーネント
- propsが更新されたコンポーネント
- 再レンダリングされたコンポーネント配下のコンポーネント全て
useState
値が更新されない
- 理由:setStateで値が更新されるのは関数が呼び出された後
React/メモ化
- propsに変更がない限り再レンダリングされないようになる
関数を子コンポーネントに渡す場合
- 何もしないと再レンダリングでコードが実行されるたびに新しい関数が再生成される
- propsが変化してしまい、子要素もレンダリングされてしまう
- useCallbackを使い関数をメモ化
