javascript - 与 Hooks react : When do re-renders happen?

Question

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

让我们假设组件:

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

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

• 组件收到新的 props
• state 已更新

相关问题

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

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

Answer 1

考虑到组件没有为类组件实现 shouldComponentUpdate，或者正在使用 React.memo 的功能，组件将在以下情况下重新渲染

• 组件收到新 Prop
• 状态已更新
• 更新上下文值(如果组件使用 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 那样执行批处理，因此如果多个状态更新一起完成，则会进行一次渲染。