React with Hooks：什么时候重新渲染？

Question

什么时候使用钩子的 React 组件会重新渲染？

让我们假设组件：

• 管理状态 useState
• props从其父级接收

是否会在以下事件之后直接重新渲染，并且仅在这些时间点发生？

• 组件接收新 props
• state 已更新

相关问题

让我们假设组件有多个useState表达式，并且用户交互会导致多个状态更新。

组件会重新渲染多次，每个state更改的值一次，还是将这些相关的更改批处理为一次重新渲染？

Answer 1

考虑到组件没有为类组件实现 shouldComponentUpdate 或使用 React.memo 作为函数，组件将在以下情况下重新渲染

• 组件接收新的 props
• 状态已更新
• 上下文值被更新（如果组件使用 useContext 监听上下文变化）
• 由于上述任何原因，父组件重新渲染

假设组件有多个 useState 表达式，并且用户交互导致多个状态更新。

组件会重新渲染多次，每个更改的状态值一次，还是将这些相关的更改批处理为一次重新渲染？

useState不会将更新的值与先前的值合并，而是执行类似的批处理setState，因此如果多个状态更新一起完成，则会进行一次渲染。

Answer 2

发现这篇关于这个主题的好文章。如果有人需要快速阅读，我将添加摘要。

\n

是什么导致了 React 中的渲染？

\n

状态修改

\n

当组件的状态被操纵时，组件会重新渲染，就这么简单。因此，当您修改组件的状态时，它往往会使用新的状态值重新呈现。

\n

传递道具

\n

如果父组件触发了重新渲染，所有子组件也会重新渲染，通常您只希望特定的子组件仅在组件正在消耗某些道具或传递的道具被修改时才重新渲染，但这不是 \xe2\x80\x99t在这种情况下，无论 props 是否被消耗、修改，如果父组件触发了渲染，子组件都会重新渲染。

\n

使用上下文 API

\n

当修改状态（也是传递给上下文的值）时，整个子组件树将被重新渲染。同样，\xe2\x80\x99 子组件是否正在消耗上下文数据并不重要，它仍然会重新渲染。重新渲染取决于传递给提供者的值，但所有整个组件树仍然会被重新渲染。

\n

传递参考资料

\n

在对象、数组和函数的情况下，比较基于引用，即确切的内存位置，因此，即使它们看起来相等，它们的比较也会产生 false，在 React Object.is 方法中用于比较不同的值。

\n

例子：

\n

{}==={}             //false\n[]===[]             //false\n{a: 5}==={a: 5}     //false\n[1,2,3]===[1,2,3]   //false\n

\n

（当比较之前的状态和新的状态时，它返回 false，因为它们没有相同的引用。只有值是相同的）

\n