Reactの再レンダリングを理解する / Understanding React Re-rendering

Transcript

1. Reactの再レンダリングを理解する Understanding React Re-rendering
2. Reactには2種類のレンダリングがある 初回レンダリング E コンポーネントが最初に画面に表示されるタイミングで発生 再レンダリング E 既に表示されているコンポーネントが更新されたタイミングで発v E 今回のLTで話したいテーマはこちら
3. Component1 の count が更新された時に 再レンダリングされるコンポーネントはどれ Á ComponentÅ Á Component Á Component3 再レンダリングに関するクイズ
4. Component1 の count が更新された時に 再レンダリングされるコンポーネントはどれ Á ComponentÅ Á Component Á Component3 正解: 全部 親コンポーネントの state が更新されると 親コンポーネント以下は全て再レンダリングされる 再レンダリングに関するクイズ
5. state 管理を子コンポーネントで行うことで 再レンダリングの範囲を最小限にできる state管理はなるべく子コンポーネントで行う
6. memo 化したコンポーネントは props の値が 変わらない限りは前回の描画結果をキャッシュする memo化で再描画を抑えることも可能
7. useStat9 6 主に狭い範囲のスコープでの state 管理に使& 6 親、子、孫コンポーネント間の値の受け渡しで props リレーが発生しがÇ 6 props リレーをしたコンポーネント配下全てで再描画が発生 useContex… 6 同一画面内での state 管理など広い範囲のスコープでの state 管理に使& 6 useContext で state を取得できるため props リレーが不h 6 stateが更新された際に context 配下全てで再レンダリングされる点は useState と同じ Redux、Recoilなどのライブラリを使Ô 6 アプリケーション全体の state 管理や useContext の代替として使& 6 React の管理外で state 管理を行い、孫コンポーネントが直接 state を取得できるため props リレーが不h 6 再レンダリングが発生するのは state を取得したコンポーネント配下のみ その他のstate管理を紹介
8. 再レンダリングを理解して アプリケーションを高速化しよう