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

Question

使用钩子的 React 组件何时会重新渲染？

让我们假设组件：

使用 useState
从其父级

props

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

组件收到新的 props
state 已更新

相关问题

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

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

Answer 1

组件将在以下情况下重新呈现，考虑到它没有为 class 组件实现 shouldComponentUpdate，或者正在使用 React.memo 函数

组件收到新道具
状态已更新
上下文值已更新（如果组件使用 useContext 监听上下文更改）
父组件由于上述任一原因重新渲染

Let's assume the component has several useState expressions and a user interaction causes multiple states to update.

Will the component re-render multiple times, once per state value that changed, or will it batch these related changes into one single re-render?

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

Answer 2

找到 this nice article 个关于此主题的内容。我会添加摘要以防有人需要快速阅读。

是什么导致了反应中的渲染？

状态修改

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

传递道具

如果父组件触发了重新渲染，所有子组件也会重新渲染，通常您只希望特定的子组件仅在组件正在使用某些道具或传递的道具被修改时才重新渲染，但事实并非如此。在这种情况下，无论 props 是否被消费、修改与否，如果父组件触发了渲染，子组件将重新渲染。

使用上下文 API

当修改也是传递给上下文的值的状态时，整个子组件树将被重新渲染。同样，子组件是否正在使用上下文数据并不重要，它仍然会重新呈现。重新渲染取决于传递给提供者的值，但仍然会重新渲染整个组件树。

传承参考

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

示例：

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

（将之前的状态与新状态进行比较时，returns错误，因为它们没有相同的引用。只有值相同）

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

React with Hooks: When do re-renders happen?

javascript

reactjs

react-hooks

是什么导致了反应中的渲染？