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。

Comments
Write a Comment