React 深度学习：memo

path：packages/react/src/memo.js

源码

import {REACT_MEMO_TYPE} from 'shared/ReactSymbols';

import isValidElementType from 'shared/isValidElementType';
import warningWithoutStack from 'shared/warningWithoutStack';

export default function memo<Props>(
  type: React$ElementType,
  compare?: (oldProps: Props, newProps: Props) => boolean,
) {
  if (__DEV__) {
    // do something
  }
  return {
    $$typeof: REACT_MEMO_TYPE,
    type,
    compare: compare === undefined ? null : compare,
  };
}

复制代码

memo 方法接受两个参数：

• type：必选参数，它是一个 React 组件。这里没有限定传入的 class 组件还是函数式组件。
• compare：可选参数，它是一个返回布尔值的比较函数。用于比较前后两个 props 是否相等。

memo 方法返回一个 $$typeof 为 REACT_MEMO_TYPE 的对象

memo 组件如何被解析

1. memo 组件如何被解析
2. memo 如何进行 props 比较

转载于:https://juejin.im/post/5d10e7136fb9a07eed350b53