React组件何时会重新渲染？

一、什么是VDOM（虚拟DOM） #

• VDOM是React对真实DOM的轻量级内存表示，本质是用JavaScript对象描述DOM节点的结构、属性和内容。
• 真实DOM操作的性能开销极高，每次修改都会触发浏览器的重排与重绘；VDOM则通过在内存中对比新旧版本的差异，只将必要的更新同步到真实DOM，以此大幅降低浏览器的性能消耗。
• 举个直观的例子：真实DOM节点 <div class="title">Hello React</div>，对应的VDOM是类似这样的JS对象：

{
  type: 'div',
  props: { className: 'title' },
  children: 'Hello React'
}

二、React触发组件重渲染的规则 #

React判断组件是否需要重渲染，核心依据是状态（state）和属性（props）的变化，具体规则如下：

• 组件自身状态更新：类组件调用setState，或函数组件调用useState/useReducer的更新函数时，React会标记该组件需要重渲染。
• 父组件触发重渲染：默认情况下，父组件重渲染时，其所有子组件都会跟着重渲染——不管子组件的props有没有实际变化。
• 传入的props发生变化：当父组件传递给子组件的props值改变时，子组件会触发重渲染。这里的对比是浅对比：如果props是对象、数组这类引用类型，哪怕内容没变化但引用地址改变，React也会判定props更新，触发重渲染。
• 强制触发重渲染：类组件可调用forceUpdate()方法强制重渲染；函数组件可以通过useReducer或更新一个空状态来模拟强制重渲染（不建议随意使用）。

避免不必要重渲染的优化手段 #

• 类组件：使用PureComponent（自带props和state的浅对比），或自定义shouldComponentUpdate生命周期方法，手动控制重渲染逻辑。
• 函数组件：用React.memo包裹组件，实现props的浅对比；配合useCallback缓存函数、useMemo缓存计算结果，避免因引用变化导致的无意义重渲染。

内容的提问来源于stack exchange，提问作者유아현