对React.PureComponent的理解和作用_react purecomponent理解-优快云博客

本文链接：https://blog.youkuaiyun.com/qwert678000/article/details/88683920

文章介绍了React中PureComponent的渲染情况。当state属性为引用对象，修改值但未改变引用时，render方法不执行；修改引用则会重新渲染。继承PureComponent时，对state里对象属性增删属性，render也不重新渲染。而state为基本类型时无此问题，可使用PureComponent优化项目性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看了很多文章都说的不清楚，有的直接是错误的。

我这就简单说一下：

1. 当你的state里面的属性有引用对象（对象、数组等）时，你通过某一个动作（比如点击事件）去修改这个值，但是没有修改它的引用。这种情况我们的render()方法是不会执行的。如下当我点击按钮的时候是没有任何输出的，因为render没有重新渲染。

export default class PageB extends React.PureComponent {
  state = {
    items: [],
  };
  handleClick = () => {
    const { items } = this.state;
    items.push("1231");
    this.setState({ items });
  };
  render() {
    console.log(this.state.items);
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    );
  }
}

2. 当我们如下修改一下handleClick，items值就会输出，render就会重新渲染。因为items的引用变了，我们新建了一个数组。

handleClick = () => {
const { items } = this.state;
items.push("1231");
this.setState({ items: [...items] });
};

3. 对象也是一样的。若是继承的PureComponent，你给state里面对象属性新增属性或者删除属性，render都不会重新渲染，如下：

state = {obj: {}};

handleClick = () => {
const { obj } = this.state;
obj.a = "234";
this.setState({ obj });
};

4.但是state里存放的是基本类型（数字，字符串，布尔等）则不会出现上述问题，每次修改时render都会加载渲染页面的。

原因就是React.PureComponent 的 shouldComponentUpdate() 只会对对象进行浅对比

5.结论：故只要注意以上问题，就可以使用PureComponent来代替Component进行项目优化，减少不必要的 render操作的次数，从而提高界面的渲染性能。