React 16.6 React.memo() 无状态组件的渲染控制

October 29, 2018

原文地址： React 16.6: React.memo() for Functional Components Rendering Control
作者：Chris Sevilleja

React.memo()是什么？

React.memo()和PureComponent很相似，都用来帮助管理组件重新渲染的时机。

组件只在它的props发生改变的时候重新渲染。一般情况下，当发生改变时组件树中的所有组件都会渲染。使用PureComponent和React.memo()，可以只渲染其中的一部分组件。

const ToTheMoonComponent = React.memo(function MyComponent(props) {
    // 只在props改变时重新渲染
});

只有需要重新渲染的部分被渲染，因此提升了性能。

PureComponent用在类组件中，React.memo()用在无状态的函数式组件中。

import React from 'react';

const MyScotchyComponent = React.memo(function MyComponent(props) {
  // 只在props改变时重新渲染
});

// 也可以写ES6的箭头函数
const OtherScotchy = React.memo(props => {
  return <div>my memoized component</div>;
});

// 使用隐式返回让代码更简洁
const ImplicitScotchy = React.memo(props => (
  <div>implicit memoized component</div>
));

包装一个现有的组件

React.memo()是高阶组件，你可以用它来包装一个现有的组件。

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

// 创建一个只在prop改变时发生渲染的版本
const MemoizedRocketComponent = React.memo(RocketComponent);