React memo解析与使用

React 16.6.0 正式发布 React.memo()

React.memo() 是什么？

React.memo() 和 PureComponent 很相似，它帮助我们控制何时重新渲染组件。

组件仅在它的 props 发生改变的时候进行重新渲染。通常来说，在组件树中 React 组件，只要有变化就会走一遍渲染流程。但是通过 PureComponent 和 React.memo()，我们可以仅仅让某些组件进行渲染。

const ToBeBetterComponent = React.memo(function MyComponent(props) {
  // only renders if props have changed
})

由于只有需要被渲染的组件被渲染了，所以这是一个性能提升。
PureComponent 要依靠 class 才能使用。而 React.memo() 可以和 functional component 一起使用。

import React from 'react';

const MySnowyComponent = React.memo(function MyComponent(props) {
  // only renders if props have changed!
});

// can also be an es6 arrow function
const OtherSnowy = React.memo(props => {
  return <div>my memoized component</div>;
});

// and even shorter with implicit return
const ImplicitSnowy = React.memo(props => (
  <div>implicit memoized component</div>
));

由于 React.memo() 是一个高阶组件，你可以使用它来包裹一个已有的 functional component：

const RocketComponent = props => <div>my rocket component. {props.fuel}!</div>;

// create a version that only renders on prop changes
const MemoizedRocketComponent = React.memo(RocketComponent);

React.memo原理

export default function memo<Props>(
  type: React$ElementType,
  compare?: (oldProps: Props, newProps: Props) => boolean,
) {
  if (__DEV__) {
    if (!isValidElementType(type)) {
      warningWithoutStack(
        false,
        'memo: The first argument must be a component. Instead ' +
          'received: %s',
        type === null ? 'null' : typeof type,
      );
    }
  }
  return {
    $$typeof: REACT_MEMO_TYPE,
    type,
    compare: compare === undefined ? null : compare,
  };
}

可以看到，最终返回的是一个对象，这个对象带有一些标志属性，在react Fiber的过程中会做相应的处理。根据传入的compare函数比较prevProps和nextProps，最终决定生成对象，并影响渲染效果。
其实就是在实现shouldComponentUpdate生命周期，之前的PureComponent是在class组件中使用，现在的memo是让函数式组件可以实现相同效果