在 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);