React.memo

✨ React v16.6+ 新增 memo 新特性官方文档

类组件可以通过继承类 PureComponent 或者实现 shouldComponentUpdate 来主动判断组件是否需要重新渲染，以此来提高性能，但是函数组件到目前为止没有类似的功能。

基本用法

类型声明：

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

代码示例：

function MyComponent(props) {
  /* 使用 props 渲染 */
}

// 比较函数
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false

  返回 true，复用最近一次渲染
  返回 false，重新渲染
  */
}

export default React.memo(MyComponent, areEqual);

Current value is 0.

基本用法

值为奇数时不重渲染，否则重渲染

说明：

React.memo 接收两个参数，一个是组件，一个是（比较）函数
- 组件：组件必须是函数式组件
- 函数：这个函数就是定义组件是否需要重渲染的钩子，该函数传入两个参数，第一个参数为上次渲染的 props，第二参数为本次渲染的 props
函数返回值为 true 时复用最近一次渲染，否则 false 重新渲染

⚠️ 注意：

如果不通过比较函数进行比较，那么依然是一种对象的浅比较，有复杂对象时无法重新渲染

React Guidebook

React.memo

基本用法

参考资料