功能组件中的React.js备忘录功能

我们将基于类的组件中的shouldComponentUpdate作为生命周期方法。通过比较道具（上一个和下一个）并有条件地执行渲染，该方法可用于实现性能优化。

我们还有React.PureComponent，它可以对状态和道具进行浅层比较。但是在功能组件中，我们没有这种方法。

现在，React提供了一个备忘方法，它将对功能组件执行相同的功能。

const functionalComponent = React.memo(function functionalComponent(props) {
   /* render using props */
});

我们已经将组件包装在memo方法中。备注方法将记住结果，直到道具相同为止。更改道具后，它将重新渲染功能。这是备忘的默认行为，但我们也可以根据需要提供自己的自定义方法来比较道具。

functionfunctionalComponent(props){
   /* render using props */
}
functionareEqual(prevProps, nextProps){
   /*
   return true if preProps and nextProps are equal else false
   */
}
exportdefault React.memo(functionalComponent, areEqual);

请注意，备注方法仅对props进行浅层比较，而在props包含嵌套的数据结构时，则进行深度比较。如果需要深度比较，可以通过在备注功能中为其添加自定义比较功能来实现。

传递给memo方法的第二个参数决定何时重新呈现该函数。在等号内，我们可以添加自定义逻辑以进行道具比较。

纯粹是为了性能优化而添加的，不应将其用于阻止渲染方法。

React.memo被实现为高阶组件。