[React] PureComponent in React

最新推荐文章于 2025-09-13 09:06:35 发布

weixin_34273046

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量103

点赞数

文章标签： javascript ViewUI

本文详细介绍了如何在React中利用PureComponent来减少不必要的组件重新渲染，通过默认实现的浅比较shouldComponentUpdate方法，可以节省时间和降低组件复杂度。但需要注意的是，这种比较方式为浅比较，对于深层对象的变化无法感知，同时传递匿名箭头函数也会导致不必要的重新渲染。

In this lesson, you will learn how to use PureComponent in React to reduce the number of times your component re-renders.

This works because PureComponent implements a shallow comparison for us by default in shouldComponentUpdate() , saving us time and reducing the complexity of our components. Its important to note that the comparison is shallow, meaning that if you are updating an object with nested values the component will not re-render as React has not noticed a change.

The same, if you pass a prop as a function reference, it will not cause re-render, but is you pass a anonymous arrow function which means it will create a new function every time, then it will cuase re-render.

 handleChange = e => {
    const { name, value } = e.target;
    this.setState({ [name]: value });
  };

// pass a function
<Counter onChange={this.handleChange} />

// vs pass a arrow function
<Counter onChange={() => console.log('this will cause re-render')} />