详细解释PureComponent在React.js中的重要性和用法

一、PureComponent简介

React 15.3于2016年6月29日发布。这个版本最值得注意的是它支持React。PureComponent，它取代了以前的纯渲染混合。在本文中，我们将讨论PureComponent的重要性和使用场景。

React最重要的用途。PureComponent是为了优化React应用，实现起来简单快捷。反应的使用。PureComponent可以大大提高性能，因为它减少了应用程序中渲染的数量。

PureComponent更改了生命周期方法shouldComponentupdate，它会自动检查组件是否需要重新呈现。此时，PureComponent只有在PureComponent检测到状态或道具的变化时才会调用render方法。因此，您可以在许多组件中更改状态，而无需手动编写额外的检查，例如：

if (this.state.someVal！==computedval) {this。setstate({ some val : computed val })}根据React源代码，如果组件是Pure Component，比较就很容易理解了：

如果(这个。_ compositeType===CompositeTypes。PureClass) { shouldUpdate=！浅滩平等(prevProps，nextProps) ||！浅层平等(inst.state，next state)；}其中，shadowEqual只对组件的道具和状态进行‘浅显’检查，这意味着嵌套对象和数组不会进行比较。

深度比较非常昂贵，如果这个组件是PureComponent，深度比较会更加浪费。或者，您可以使用shouldComponentUpdate手动确定组件是否需要重新呈现。最简单的方法就是直接比较道具或者状态：

should component update(nextProps，nextState){ return nextProps . user . id===props . user . id；}此外，您可以使用不可变属性。在这种情况下，属性的比较非常容易，因为现有的对象不会改变，而是会创建新的对象。其中，不可变. js是一个非常好的不可变库。

第二，PureComponent的使用

PureComponent为我们节省了时间，避免了冗余代码。那么，掌握如何正确使用是非常重要的，否则使用不当就不行了。因为PureComponent只是一个阴影比较，如果你改变组件内部的道具或者状态，它将不起作用。例如，让我们考虑一种情况，其中父组件有一个渲染方法和一个点击处理方法：

handleClick(){ let { items }=this . state items . push(' new-item ')this . setstate({ items })} render(){ return(div button onClick={ this . handleClick }/items list items={ this . state . items }//div)}如果项列表是一个PureComponent，则此时不会呈现它，因为尽管此的值。state.items已更改，但它仍然指向同一对象的引用。但是，很容易通过移除变量对象来改变这种情况，以便可以正确呈现它们。

handleClick(){ this . setstate(prev state=({ words : prev state . items . concat([' new-item '])}))；}如果PureComponent的状态或道具引用了一个新对象，该组件将被重新渲染。这意味着，如果我们不想失去PureComponent的优势，那么我们应该避免以下结构：

Entityvalues={this。道具。values | |[]}/就像上面的代码一样，一个新数组，甚至是一个空数组，总是会强制组件重新呈现。为了避免这个问题，您可以使用defaultProps，它包含属性的初始化空状态。解决这个问题的另一种方法如下：

自定义输入onchange={ e=this . props . update(e . target . value)}/创建PureComponent时，由于创建了函数的新对象，它将获得新数据并重新渲染。解决这个问题最简单的方法是在组件的构造函数方法中使用bind。

构造函数(道具){ super(道具)this . update=this . update . bind(this)} update(e){ this . props . update(e . target . value)} render(){返回我的输入onchange={this。update}/}同时，在JSX，对于任何包含子元素的组件，浅层相等检查总是返回false。

请记住，当PureComponent忽略重渲染时，不仅会影响自身，还会影响其子元素。因此，使用纯组件的最佳方式是显示组件，它既没有子组件，也不依赖于应用程序的全局状态。

三.摘要

事实上，如果您已经意识到了浅层平等和JS引用的特性，那么过渡到PureComponent是相当容易的。在正常情况下，迁移的方式非常简单，就像从

Class my component扩展了组件{ 0.}到

类我的组件扩展了纯组件.}，这不仅可以平滑过渡，还可以提高性能。因此，我强烈建议大家在开发应用程序时使用PureComponent。

第四，注意

当一个纯组件有子组件时，所有基于此. context更改的子组件将不会在此. context更改时重新呈现，除非在父组件中声明了contextTypes。

这篇文章被翻译成habrahabr。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。