在 React 中，Component 和 PureComponent 的核心区别就在于 是否自动进行浅层比较 (shallow compare)，从而决定组件是否需要重新渲染。
1. React.Component
Component 不会自动比较 props 或 state，只要父组件重新渲染（哪怕 props 没变），它也会执行 render()。
换句话说：
默认每次都重新渲染
除非你自己写 shouldComponentUpdate 去控制
class MyComponent extends React.Component {render() {console.log('Component render');return <div>{this.props.value}</div>;}
}
2. React.PureComponent
PureComponent 内部带了一个自动的：shouldComponentUpdate( nextProps, nextState )
并执行 浅层比较 (shallow equal)：
-
props 没变（浅比较）
-
state 没变（浅比较）
就不会重新渲染
从而减少不必要的 render
示例：
class MyPureComponent extends React.PureComponent {render() {console.log('PureComponent render');return <div>{this.props.value}</div>;}
}
如果 props/state 没变，render() 不会执行。
浅比较（shallow compare）是什么意思？
对比的是引用是否相同，不是内容是否相同。
例如：
{ a: 1 } === { a: 1 } // false（引用不同）
所以：
-
如果 props 是基本类型（number、string、boolean）：效果很好
-
如果 props 是对象、数组，且你用 mutable 修改方式，引用不变 → PureComponent 会认为没变 → 不会更新（BUG）
Component 与 PureComponent 的对比总结
| 特性 | Component | PureComponent |
|---|---|---|
| 是否自动比较 props/state | ❌ 否 | ✅ 是（浅比较） |
| 是否减少无效渲染 | ❌ 否 | ✅ 是 |
| 是否容易踩坑 | 👍 稳定 | ⚠️ 如果 props 是对象/数组容易误判 |
| 常见用途 | 默认所有组件 | 性能优化、UI 展示型组件 |
什么时候用 PureComponent？
-
props/state 基本类型
-
props/state 是不可变数据（使用 immutable 或通过扩展符结构拷贝）
例如：
this.setState({ list: [...this.state.list, newItem] })
什么时候不要用 PureComponent？
当 props 或 state 经常是：
-
嵌套对象
-
嵌套数组
-
引用不变但内容变了
例如：
this.state.obj.a = 1; // 引用没变
this.setState({ obj: this.state.obj }); // PureComponent 判断不出变化
会导致界面不更新。
总结
Component：默认每次都更新
PureComponent：自动浅比较，不变就不更新（性能优化）
想要性能更好、避免重复渲染 → 用 PureComponent
但要注意：一定要保持 props/state 的不可变性