React总结13：PureComponent

最新推荐文章于 2024-09-07 12:49:56 发布

juzipchy

最新推荐文章于 2024-09-07 12:49:56 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

分类专栏： React

本文链接：https://blog.youkuaiyun.com/juzipchy/article/details/84842536

React 专栏收录该内容

23 篇文章

订阅专栏

本文介绍React15.3中新增的PureComponent类，通过替换继承类以减少不必要的渲染，提升性能。深入解析PureComponent的工作原理，包括如何进行浅比较以及与shouldComponentUpdate方法的共存机制。

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

怎么使用：
React15.3中新加了一个 PureComponent 类，只要把继承类从 Component 换成 PureComponent 即可，可以减少不必要的 render 操作的次数，从而提高性能，而且可以少写 shouldComponentUpdate 函数，节省了点代码。

只要把继承类从 Component 换成 PureComponent 即可，可以减少不必要的 render 操作的次数，从而提高性能，而且可以少写 shouldComponentUpdate 函数，节省了点代码。

原理：
在React Component的生命周期中，有一个shouldComponentUpdate方法。这个方法默认返回值是true。这意味着就算没有改变组件的props或者state，也会导致组件的重绘。这就经常导致组件因为不相关数据的改变导致重绘，这极大的降低了React的渲染效率。PureComponent在shouldComponentUpdate 中自动帮我们做了一层浅比较。

 if (this._compositeType === CompositeTypes.PureClass) {
      shouldUpdate = !shallowEqual(prevProps, nextProps)
      || !shallowEqual(inst.state, nextState);
    }

shallowEqual Object.keys(state | props) 的长度是否一致，每一个 key 是否两者都有，并且是否是一个引用，也就是只比较了第一层的值，因此是个浅比较，深层的嵌套数据是对比不出来。
下面对数据的修改并不会导致重绘（假设Table也是PureComponent)

  options.push(new Option())
  options.splice(0, 1)
  options[i].name = "Hello"

与 shouldComponentUpdate 共存：
如果 PureComponent 里有 shouldComponentUpdate 函数的话，直接使用 shouldComponentUpdate 的结果作为是否更新的依据，没有 shouldComponentUpdate 函数的话，才会去判断是不是 PureComponent ，是的话再去做 shallowEqual 浅比较。