React 15.3在2016.06.29发布了，这个版本最值得关注的是支持了PureComponent 。PureComponent最重要的一个用处就是优化React应用，这很容易快速地实现。使用 PureComponent 对性能的提升是非常可观的，因为它减少了应用中的渲染次数。
PureComponent改变了生命周期方法 shouldComponentupdate ，并且它会自动检查组件是否需要重新渲染。这时，只有PureComponent检测到 state 或者 props 发生变化时，PureComponent才会调用 render 方法，因此，你不用手动写额外的检查，就可以在很多组件中改变 state 。
PureComponent只会"浅"检查组件的 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 ，它将不会发挥作用。
在纯组件(PureComponent)被创建时，因为函数的新对象被创建了，所以它会获得新数据，并且重新渲染。解决这个问题最简单的方法就是: 在组件的 constructor 方法中使用 bind 。
请谨记：纯组件忽略重新渲染时，不仅会影响它本身，而且会影响它的说有子元素，所以，使用PureComponent的最佳情况就是展示组件，它既没有子组件，也没有依赖应用的全局状态。
从Component到PureComponent
过渡到PureComponent是相当容易的。正常情况下，迁移的方式非常简单，从
class MyComponent extends Component {...}
到
class MyComponent extends PureComponent {...}
这样不仅能平滑过渡，甚至可以提升性能。所以，我极力推荐所有人在开发应用中使用PureComponent。
网友评论