数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会科学
时装设计
法律研究React.js 功能组件中的 memo 函数
作为生命周期方法，我们在基于类的组件中拥有 shouldComponentUpdate。通过比较属性（上一个和下一个）并有条件地执行渲染，可以使用此方法来实现性能优化。
我们也有 React.PureComponent，它可以对状态和属性进行浅层比较。但在函数组件中，我们没有这样的方法。
现在，React 提供了一种 memo 方法，该方法将对功能组件执行相同的功能。
const functionalComponent = React.memo(function functionalComponent(props) {
/* render using props */
});我们在 memo 方法中包装了组件。直到属性相同，memo 方法才会记住结果。一旦属性更改，它将重新渲染函数。这是 memo 的默认行为，但我们还可以根据我们的要求提供我们自己的自定义方法来比较属性。
functionfunctionalComponent(props){
/* render using props */
}
functionareEqual(prevProps, nextProps){
/*
return true if preProps and nextProps are equal else false
*/
}
exportdefault React.memo(functionalComponent, areEqual);请注意，memo 方法仅对属性进行浅层比较，如果属性包含嵌套数据结构，则进行深度比较。如果我们需要深度比较，我们可以通过在 memo 函数中为其添加自定义比较函数来实现。
传递给 memo 方法的第二个参数决定何时重新渲染函数。在 are Equal 中，我们可以添加比较属性的自定义逻辑。
这纯粹是为了性能优化而添加的，不应使用它来阻止渲染方法。
React.memo 实现了为高阶组件。
更新于：2019 年 9 月 4 日
311 次浏览
广告