对React备忘录问好

TLDR :作为一名出色的开发人员,优化您的react应用程序对您很重要。 当我谈论何时以及如何使用它时,React 16.6.0提供了一种优化功能组件的方法。

React101大家都知道,当状态/ 属性更改时,组件将与其子代的子代一起重新渲染。 看一下下面的组件。

 函数App(){ 
返回(


}; 函数A(道具){
return();
}函数B(){
return();
}
函数C(){
return();
}
函数D(){
return(
...
);
}

App中的道具或状态发生变化时,它将在此重新释放其子级A 在这种情况下,A然后重新提交B,其中C重新提交D。 在大多数情况下,这不是您想要的-您不希望树中的所有组件都重新呈现。 假设组件B在渲染时做了一些繁重的工作,您不希望现在对它进行r渲染,然后对0个不需要的更改进行渲染。

除非道具或状态发生更改,否则React提供了一种阻止组件重新渲染的方法。 对于类组件,react提供了PureComponent处理问题。 纯组件通过使用shouldComponentUpdate方法来防止在内部进行重新渲染,在该方法中,它对道具进行了浅浅的比较,以防止在道具/状态不变(浪费渲染)时进行重新渲染。 考虑下面的示例:

在上面的代码片段中,我们扩展了React.PureComponent,因此可以防止在props没有变化的情况下重新渲染组件,或者在您认为优化时指出这一点非常重要。 众所周知,Pure Components可以为您的应用程序提供明显的性能预感。

React.memo是功能组件,而React.PureComponent是类组件,唯一明显的区别是前者是函数,而前者是类。

  React.memo(()=>()) 

让我们看一个简单的例子:

以上是使功能组件纯净所需要做的一切; 只需将您的功能组件包装在React.memo中,并发布有关您的应用变得多快的推文。 😛…也许不如光速fast快。

最后,确保您的react版本为^ 16.6.0(大于或等于版本16.6.0)。

更新

使用npm

  npm我-保存精确的react@^16.6.0 

或纱线

 纱线升级   react@16.6.0 

在另一个帖子中抓住你!

我是Twitter上的@marvinjudehk。