React Component和Purecomponent区别

前言

大家好，我是小杨，一个做了快6年的前端老油条。今天聊一个React里老生常谈但很多人其实没彻底搞明白的问题------Component和PureComponent的区别。别看它基础，用对了能直接提升组件性能，用错了可能莫名其妙踩坑。下面我就用最人话的方式，带大家彻底搞懂它！

1. 先看本质区别

Component：每次父组件更新，子组件无条件跟着重新渲染（不管props/state变没变）。
PureComponent ：会自动对props和state做浅比较，只有变化了才重新渲染。

👉 一句话总结 ：PureComponent是Component的"智能防呆版"，能避免不必要的渲染。

2. 举个栗子🌰，立马明白

假设有个"我"的信息展示组件：

jsx 复制代码

// 普通Component版本
class 我的信息 extends React.Component {
  render() {
    console.log('我渲染了！'); // 每次父组件更新都会触发
    return <div>{this.props.name} 今年 {this.props.age} 岁</div>;
  }
}

// PureComponent版本
class 我的信息 extends React.PureComponent {
  render() {
    console.log('我渲染了！'); // 只有props.name或props.age变化时触发
    return <div>{this.props.name} 今年 {this.props.age} 岁</div>;
  }
}

现象：

如果父组件传给<我的信息 name="小杨" age={18} />的props一直不变：
- Component版本：父组件任何state更新，子组件都会傻傻地重新渲染。
- PureComponent版本：直接跳过渲染，省性能！

3. 什么时候该用PureComponent？

✅ 适合场景：

纯展示型组件（props/state变化不频繁）。
数据结构简单（浅比较能准确判断变化）。

❌ 慎用场景：

props/state嵌套层级深（浅比较会漏判变化）。
传递回调函数（每次父组件渲染生成新函数引用，浅比较失效）。

举个坑爹例子：

jsx 复制代码

<我的信息 
  name="小杨" 
  age={18}
  onClick={() => { /* 每次父渲染都生成新函数！PureComponent失效 */ }}
/>

4. 手动优化：函数组件版

函数组件没有PureComponent，但可以用React.memo实现同样效果：

jsx 复制代码

const 我的信息 = React.memo(
  ({ name, age }) => <div>{name} 今年 {age} 岁</div>,
  (prevProps, nextProps) => prevProps.name === nextProps.name 
    && prevProps.age === nextProps.age // 自定义比较逻辑
);

5. 小杨的实战建议

默认先用Component，遇到性能问题再考虑优化。
深数据结构 别硬用PureComponent，该用useMemo/useCallback手动控制。
记住浅比较的局限 ：{ a: 1 }和{ a: 1 }会被判定为"不同"（因为是两个对象引用）。

最后吐槽

当年我第一次用PureComponent时，因为传了个style={{ color: 'red' }}导致组件死活不更新，排查到凌晨3点...（血的教训啊！）大家用的时候一定要留意引用类型！

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！