在 React 中将 shouldcomponentupdate 转换为备忘录

Question

使用 React 备忘录的等效代码是什么？

 shouldComponentUpdate(nextProps) {

    if (this.props.addCourse !== nextProps.addCourse || this.props.level !== nextProps.level ) {
      return true;
    } else {
      return false;
    }
  }

Answer 1

memo高阶组件消耗了一个额外的areEqual function ，它应该返回shouldComponentUpdate的倒数。

备忘录

笔记

与 class 组件上的shouldComponentUpdate()方法不同，如果 props 相等， areEqual function 返回true ，如果 props 不相等，则返回false 。 这与shouldComponentUpdate 。

const areEqual = (prevProps, nextProps) => {
  if (
    prevProps.addCourse !== nextProps.addCourse ||
    prevProps.level !== nextProps.level
  ) {
    return false;
  }
  return true;
};

memo(MyComponent, areEqual);