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

原文地址： 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);

栗子

示例应用包括

  • 一个只用来触发应用render的计数器
  • 显示消息的输入框
  • 显示消息内容的组件，包括一个一般的版本和一个使用React.memo的

React Developer Tools还没有很好的支持React.memo()，因此可能会显示TODO_NOT_IMPLEMENTED_YET。
 实际是点击按钮后ScotchyComponent执行了render，而另一个没有

为什么叫memo？

维基百科

在计算机科学中，记忆化（英语：memoization而非memorization）是一种提高程序运行速度的优化技术。通过储存大计算量函数的返回值，当这个结果再次被需要时将其从缓存提取，而不用再次计算来节省计算时间。

这实际上也是React.memo()所做的，查看一个即将执行的新的渲染是否和之前的不同，如果一样，就保持之前的那个。

在Twitter上，Dan Abramov也回答了这个问题，为什么这个方法被称为memo而不是像PureComponent那样使用pure。

React
Comments
Write a Comment