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。