React 渲染的视觉指南 - 速查表

React 组件何时会重新渲染？什么原因会导致重新渲染？又该如何避免不必要的渲染？这里有一个速查表，当你遇到这些问题时可以参考。

本文是React 渲染可视化指南系列的目录。速查表的每个部分都链接到该指南中深入探讨该主题的相应章节。

标准渲染和备忘录

默认情况下，当组件状态发生变化时，该组件及其所有子组件都会重新渲染。你可以使用包裹 React 组件，memo以防止整个子树重新渲染。

javascript 中的非原始值通过引用进行比较。

{display: "flex"} === {display: "flex"} // false

在将 props 传递给 memoized 组件时，请记住这一点。当 props 发生变化时，memoized 组件会重新渲染。

您可以使用保存对非原始值的引用useMemo。它在重新渲染时不会改变。

您可以使用以下方式保存对函数的引用useCallback

上下文提供程序下的组件可能应该使用memo

React 组件渲染并不意味着 DOM 更新。React 足够智能，只更新 DOM 中需要更改的部分。