详解在React.js中使用PureComponent的重要性和使用方式 一、介绍PureComponent React 15.3在2016.06.29发布了,这个版本最值得关注的是支持了 React.PureComponent ,它取代了之前的 pure-render-mixin 。在本文中,我们将讨论 PureComponent 的重要性和使用场景。 React.PureComponent最重要的一个用处就是优化React应用,这很容易快速地实现。使用 React.PureComponent 对性能的提升是非常可观的,因为它减少了应用中的渲染次数。 PureComponent改变了生命周期方法 shouldComponentupdate ,并且它会自动检查组件是否需要重新渲染。这时,只有PureComponent检测到 state 或者 props 发生变化时,PureComponent才会调用 render 方法,因此,你不用手动写额外的检查,就可以在很多组件中改变 state , 例如: if (this.state.someVal !== computedVal) { this.setState({ someVal: computedVal }) } 根据React源码,如果组件是纯组件(Pure Component),那么一下比较是很容易理解的: if (this._compositeType === CompositeTypes.PureClass) { shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState); } 其中, shadowEqual 只会"浅"检查组件的 props 和 state ,这就意味着嵌套对象和数组是不会被比较的。 深比较操作是非常昂贵的,同时,如果这个组件还是纯组件(PureComponent),那么深比较将会更浪费。另外,你也可以使用 shouldComponentUpdate 来手动确定组件是否需要重新渲染。最简单的方式就是直接比较 props 或 state : shouldComponentUpdate(nextProps, nextState) { return nextProps.user.id === props.user.id; } 除此之外,你可以使用 immutable 属性。这种情况下,属性的比较是非常容易的,因为已存在的对象不会发生改变,取而代之的是重新创建新的对象。其中, Immutable.js 就是非常好的Immutable库。 二、使用PureComponent PureComponent节约了我们的时间,避免了多余的代码。那么,掌握如何正确使用它是非常重要的,否则如果使用不当,它就无法发挥作用。因为PureComponent仅仅是浅比较(shadow comparison),所以改变组件内部的 props 或者 state ,它将不会发挥作用。例如,让我们想想这样一种情况,父组件有一个render方法和一个click处理方法: handleClick() { let {items} = this.state items.push('new-item') this.setState({ items }) } render() { return (