什么是React.memo?

在React v16.6.0中,发布了许多新功能。 很酷的功能之一是React.memo。 备忘录意味着记忆。 这是功能组件的性能优化功能。 React.memo是高阶组件。 这个组件类似于React.PureComponent。

PureComponent用于跳过类组件的不需要的重新渲染,而React.memo用于功能组件。 此功能对于优化应用程序非常有用。 当组件收到与先前道具相同的道具时,此更高阶的组件将跳过重新渲染。 我们可以通过包装您的功能组件来使用备忘录

  const MemoComponent = React.memo(function MemoComponent(props){ 
/ *使用道具渲染* /
});或导出默认的React.memo(MyFunctionComponent);

React.memo只通过浅拷贝来比较道具。 React.memo允许我们也执行自己的比较。 我们还可以提供自定义比较函数作为React.memo(FunctionComponent,ComparisionFun)的第二个参数。 下面提供示例

 函数MyComponent(props){ 
/ *使用道具渲染* /
}
函数areEqual(prevProps,nextProps){
/ *
如果传递nextProps渲染将返回,则返回true
与传递prevProps进行渲染的结果相同,
否则返回假
* /
}
导出默认的React.memo(MyComponent,areEqual);

我希望这能使您了解React.memo()。 快乐的编码。