共计 1173 个字符，预计需要花费 3 分钟才能阅读完成。
介绍 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 手稿》
