解读 React.memo

Posted 2023-05-04

参考技术A 介绍 React.memo 之前，先了解一下 React.Component 和 React.PureComponent 。

React.Component 是基于ES6 class 的React组件。

React允许定义一个 class 或者 function 作为组件，那么定义一个组件类，就需要继承 React.Component .

例如：

注意：继承 React.Component 的React组件类中， render() 为必须方法，其他都为可选。

React.PureComponent 和 React.Component 类似，都是定义一个组件类。不同是 React.Component 没有实现 shouldComponentUpdate() ，而 React.PureComponent 通过 props 和 state 的浅比较实现了。

如果组件的 props 和 state 相同时， render 的内容也一致，那么就可以使用 React.PureComponent 了,这样可以提高组件的性能。

例如：

React.memo 是一个高阶组件，类似于 React.PureComponent ，不同于 React.memo 是 function 组件， React.PureComponent 是 class 组件。

示例：

这种方式依然是一种对象的浅比较，有复杂对象时无法 render 。在 React.memo 中可以自定义其比较方法的实现。

例如：

推荐阅读 《React 手稿》

React.memo

介绍React.memo之前，先了解一下React.Component和React.PureComponent。

React.Component

React.Component是基于ES6 class的React组件。

React允许定义一个class或者function作为组件，那么定义一个组件类，就需要继承React.Component.

例如：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

注意：继承React.Component的React组件类中，render()为必须方法，其他都为可选。

React.PureComponent

React.PureComponent 和 React.Component类似，都是定义一个组件类。不同是React.Component没有实现shouldComponentUpdate()，而 React.PureComponent通过props和state的浅比较实现了。

如果组件的props和state相同时，render的内容也一致，那么就可以使用React.PureComponent了,这样可以提高组件的性能。

例如：

class Welcome extends React.PureComponent {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

当props和state中有复杂数据结果时，不好使用PureComponent。

React.memo

React.memo是一个高阶组件，类似于React.PureComponent，不同于React.memo是function组件，React.PureComponent是class组件。

示例：

const MyComponent = React.memo(props => {
  /* render using props */
  return (

  );
});

这种方式依然是一种对象的浅比较，有复杂对象时无法render。在React.memo中可以自定义其比较方法的实现。

例如：

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

该方法在V16.6.0才支持

推荐阅读《React 手稿》

来源：https://segmentfault.com/a/1190000016933809