React中PureComponent与无状态函数组件的性能对比分析

让我们结合React的渲染机制，拆解这两个TodoItem实现的性能表现差异：

核心区别：是否跳过不必要的重渲染 #

React组件重渲染的触发条件默认是：自身state变更、props变更，或者父组件重渲染。两个版本的核心差异在于是否会自动过滤无意义的重渲染：

1. React.PureComponent 类组件版本 #

PureComponent 内置了基于**浅比较（shallow comparison）**的shouldComponentUpdate逻辑，简单来说：

• 只有当传入的props或自身state发生浅层次变化时，组件才会执行重渲染
• 在你的示例中，如果父组件Todos因为其他state属性变更（而非item）触发重渲染，这个TodoItem会直接跳过渲染——因为浅比较发现props.item的值没有变化
• 注意：如果item是引用类型（比如对象、数组），浅比较只会对比引用地址，不会深查内部属性。这意味着如果引用地址不变，哪怕内部属性修改了，组件也不会重渲染（这是它的局限，但也是保证高效的关键）

2. 普通函数组件版本 #

这个未做优化的函数组件遵循React的默认规则：

• 只要父组件Todos发生重渲染，不管props.item有没有变化，这个函数组件都会重新执行渲染逻辑、生成新的虚拟DOM
• 哪怕props.item的值和上一次完全一致，它也会走一遍渲染流程——虽然React的DOM diff会最终避免真实DOM的更新，但函数执行、虚拟DOM创建的开销依然存在，在大量列表渲染的场景下，这类无意义的开销会累积成明显的性能问题

结合你的示例场景的具体表现 #

在当前代码中，父组件Todos的state.item固定为'Test'：

• 如果父组件因其他原因（比如新增state属性并修改）触发重渲染，PureComponent版本的TodoItem不会跟着重渲染；而普通函数组件版本会无条件重渲染
• 如果你后续修改state.item的值（比如从'Test'改成'Buy milk'），两个组件都会正常重渲染，此时表现一致

额外补充：函数组件的性能优化方案 #

如果想让函数组件拥有和PureComponent类似的性能表现，可以用React.memo包裹它：

const TodoItem = React.memo(function TodoItem(props) {
  return <div>{props.item}</div>
});

React.memo会对函数组件的props做浅比较，跳过不必要的重渲染，效果和PureComponent类似（区别在于PureComponent还会对比自身state，而React.memo仅关注props）

内容的提问来源于stack exchange，提问作者CaribouCode