解释 React 中PureComponent与普通组件的区别，在性能优化方面有何不同？-CSDN博客

本文链接：https://blog.csdn.net/qq_37212162/article/details/147773266

大白话解释 React 中PureComponent与普通组件的区别，在性能优化方面有何不同？

前端打工人，每天除了和各种需求、Bug斗智斗勇，还要时刻准备应对面试挑战。在React的世界里，有两个兄弟——PureComponent和普通组件，面试官特别爱拿他俩来考我们。为啥呢？因为这背后藏着React性能优化的关键知识点，掌握了它们，不仅面试稳了，工作中也能让项目跑得更丝滑！今天咱就掰开了、揉碎了，用大白话唠一唠这俩兄弟到底有啥不一样。

前端性能焦虑的真实写照

想象一下，你吭哧吭哧开发了一个超酷的React项目，功能齐全、界面好看，满心欢喜地交付上线。结果用户反馈说，页面加载慢、操作卡顿，甚至有时候还会出现白屏。这时候，产品经理皱着眉头找你，老板也投来质疑的目光，压力一下子就上来了。

再说说面试场景，面试官微笑着问你：“能讲讲React中PureComponent和普通组件的区别吗？在性能优化方面有啥不同？”要是你支支吾吾答不上来，或者说得模棱两可，那这次面试大概率就凉凉了。要知道，现在前端竞争这么激烈，一个小问题没答好，可能就和心仪的offer擦肩而过了。

其实，很多性能问题都和组件的渲染机制有关。普通组件可能会因为一些不必要的重新渲染，导致性能损耗。而PureComponent就是为了解决这个问题而生的，它就像给组件加了一道“智能过滤”，帮我们减少无效渲染，提升性能。

揭开PureComponent和普通组件的神秘面纱

普通组件的渲染机制

在React里，普通组件是通过Component类来创建的。当组件的props或者state发生变化时，React就会认为组件需要更新，然后重新调用组件的render方法来生成新的虚拟DOM。这里有个关键点，只要props或者state有任何变动，不管这些变动是不是真的影响到了组件的实际展示，组件都会重新渲染。

举个例子，假如你有一个显示用户信息的组件，props里传了用户的名字和头像。如果某个操作只是更新了和这个组件毫无关系的其他数据，但React并不知道，它还是会重新渲染这个用户信息组件，这就造成了不必要的性能浪费。

PureComponent的特殊之处

PureComponent继承自Component，它做了一件很聪明的事情：在shouldComponentUpdate生命周期方法中，自动帮我们做了一层浅比较。所谓浅比较，就是只比较对象或者数组的引用地址，而不是深入比较它们内部的每一个元素。

当props或者state发生变化时，PureComponent会先对新旧的props和state进行浅比较。如果比较结果是引用地址没有变化，它就认为组件的实际数据没有改变，就不会触发重新渲染。这样一来，就能避免很多不必要的渲染操作，提升性能。

不过，浅比较也有它的局限性。如果你的数据结构比较复杂，比如对象里嵌套对象，数组里嵌套数组，当内部元素发生变化但整体引用地址不变时，PureComponent就无法识别到这种变化，可能会导致页面显示异常。这时候，就需要我们手动处理数据更新，保证引用地址发生变化。

手把手教你玩转两种组件

普通组件示例

import React, { Component } from'react';

// 创建一个普通组件
class NormalComponent extends Component {
  // 初始化state
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // 点击按钮更新state
  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  // 渲染组件
  render() {
    console.log('NormalComponent re-render');
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

export default NormalComponent;

在这个普通组件里，每次点击按钮更新count时，组件都会重新渲染，控制台会打印出NormalComponent re-render。

PureComponent示例

import React, { PureComponent } from'react';

// 创建一个PureComponent
class PureComponentExample extends PureComponent {
  // 初始化state
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // 点击按钮更新state
  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  // 渲染组件
  render() {
    console.log('PureComponentExample re-render');
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

export default PureComponentExample;

在这个PureComponent里，同样点击按钮更新count，如果只是count的值变化，而props和state的整体引用地址不变，组件就不会重新渲染，控制台也就不会打印PureComponentExample re-render。

一目了然看清两者差异

对比项	普通组件（Component）	PureComponent
渲染机制	`props`或`state`变化就重新渲染	先进行`props`和`state`的浅比较，引用地址不变则不重新渲染
性能表现	可能存在大量不必要的重新渲染，性能损耗较大	减少不必要的重新渲染，性能较好
适用场景	数据变化频繁且需要精确控制渲染逻辑的场景	数据结构相对简单，且不需要深度比较数据变化的场景
缺点	性能容易出现问题	无法处理复杂数据结构的深层变化，可能导致页面显示异常

通过这个表格，我们能更直观地看到普通组件和PureComponent在各个方面的区别。在实际项目中，我们可以根据具体的业务需求和数据结构，选择合适的组件类型。

面试回答方法

面试官问起这个问题，咱可以这么回答：“面试官您好！React里的普通组件和PureComponent主要区别在渲染机制和性能优化上。普通组件只要props或者state有变化，就会重新渲染，不管这个变化是不是真的影响到了组件展示，所以可能会做很多无用功，导致性能变差。

而PureComponent就聪明多了，它会自动对props和state做浅比较。只有当props或者state的引用地址变了，它才会重新渲染。这样就能避免很多不必要的渲染，提升性能。不过，PureComponent的浅比较有个短板，遇到复杂数据结构，比如对象嵌套对象、数组嵌套数组，内部元素变了但引用地址没变，它就识别不出来，可能会出问题。

在实际项目里，要是数据结构简单，我就用PureComponent；要是数据变化复杂，需要精细控制渲染，我就用普通组件，自己写shouldComponentUpdate方法来优化。”

这样回答，既清晰明了，又体现了对知识点的深入理解，还结合了实际应用，面试官听了肯定满意！

抓住核心，轻松掌握

React中的PureComponent和普通组件各有优劣，它们的本质区别就在于渲染机制。普通组件简单直接，但容易产生性能问题；PureComponent通过浅比较减少了不必要的渲染，提升了性能，但也有适用范围。

在开发过程中，我们要根据具体的业务场景和数据结构，灵活选择合适的组件类型。如果遇到复杂数据结构，还可以结合其他性能优化手段，比如使用immutable.js来保证数据的不可变性，或者手动实现更精确的shouldComponentUpdate逻辑。

深挖技术，提升自我

除了浅比较，还有哪些性能优化方法？
除了PureComponent的浅比较，我们还可以使用React.memo来优化函数式组件，它和PureComponent类似，也是通过比较props来决定是否重新渲染。另外，合理使用shouldComponentUpdate方法、避免在render方法中创建新的对象和数组、使用虚拟滚动等，都是常见的性能优化手段。
如何处理PureComponent无法识别深层数据变化的问题？
当遇到复杂数据结构时，可以使用immer库来帮助我们更方便地更新数据，它会自动帮我们生成新的引用地址。也可以手动实现深度比较，但这种方式性能开销较大，一般不建议使用。还可以将复杂数据拆分成多个简单数据，分别用PureComponent来管理。
在大型项目中，如何系统地进行性能优化？
在大型项目中，性能优化是一个系统性工程。首先要进行性能分析，使用React DevTools等工具找出性能瓶颈。然后从组件优化、网络优化、代码分割、懒加载等多个方面入手，制定全面的优化方案。同时，还要建立性能监控机制，持续跟踪项目性能，及时发现和解决问题。