React【二】Memo函数第二个传参，props深度比较

在我的上一篇博客中有提到：memo是通过对props值的浅比较来决定该组件是否需要更新的，当遇到层级比较深的复杂对象时，就会有些力不从心，对于特定的业务场景，可能需要类似 shouleComponentUpdate 这样的 API，这时可以通过memo的第二个传参来实现。

function arePropsEqual(prevProps, nextProps) {
  // your code
  return prevProps === nextProps;
}
 
export default memo(Button, arePropsEqual);

// 或者另一个
function areEqual(prevProps: any, nextProps: any) {

  if (prevProps.visible === nextProps.visible || prevProps.content === nextProps.content || prevProps.loadding === nextProps.loadding) {
    return false;
  } else {
    return true;
  }
}
export default memo(FullScreen, areEqual);

• memo() 第一个参数是要包裹的组件
• 第二个参数为前后props的值的比较方式，判断props是否改变，默认是浅比较

默认情况下，只会对复杂对象做浅层对比，如果想要控制对比过程，那么可以自定义比较函数，通过第二个参数传入来实现，比如上面的代码

注意：

与shouldComponentUpdate不同的是，arePropsEqual返回true时，不会触发render，返回false时则会触发，与shouldComponent正好相反。

React.memo仅检查props变更