React.memo()
React 16.6.0 发布了 主要更新了两个新的重要功能：
- React.memo()
- React.lazy(): 使用 React Suspense 进行代码拆分和懒加载
今天我们会重点介绍 React.memo()，后续会介绍 React.lazy() 和 Suspense。
React.memo() 是什么？
React.memo() 和 PureComponent 很相似，它帮助我们控制何时重新渲染组件。
组件仅在它的 props 发生改变的时候进行重新渲染。通常来说，在组件树中 React 组件，只要有变化就会走一遍渲染流程。但是通过 PureComponent 和 React.memo()，我们可以仅仅让某些组件进行渲染。
const ToBeBetterComponent = React.memo(function MyComponent(props) {
// only renders if props have changed
})
由于只有需要被渲染的组件被渲染了，所以这是一个性能提升。
PureComponent 要依靠 class 才能使用。而 React.memo() 可以和 functional component 一起使用。
import React from 'react';
const MySnowyComponent = React.memo(function MyComponent(props) {
// only renders if props have changed!
});
// can also be an es6 arrow function
const OtherSnowy = React.memo(props => {
return <div>my memoized component</div>;
});
// and even shorter with implicit return
const ImplicitSnowy = React.memo(props => (
<div>implicit memoized component</div>
));
包裹已有的组件
由于 React.memo() 是一个高阶组件，你可以使用它来包裹一个已有的 functional component：
const RocketComponent = props => <div>my rocket component. {props.fuel}!</div>;
// create a version that only renders on prop changes
const MemoizedRocketComponent = React.memo(RocketComponent);
为什么它被称作 memo？
在维基百科上是这么说的：
在计算机领域，记忆化是一种主要用来提升计算机程序速度的优化技术方案。它将开销较大的函数调用的返回结果存储起来，当同样的输入再次发生时，则返回缓存好的数据，以此提升运算效率。
注: 在 《JavaScript 忍者秘籍》的 3.2.2 节中「自记忆函数」中有这样的介绍：记忆化是一种构建函数的处理过程，能够记住上次计算结果。在这个果壳里，当函数计算得到结果时就将该结果按照参数存储起来。采用这种方式时，如果另外一个调用也使用相同的参数，我们则可以直接返回上次存储的结果而不是再计算一遍。像这样避免既重复又复杂的计算可以显著地提高性能。
这就是 React.memo() 所做的事情，所以叫做 memo 也很说得通。它会检查接下来的渲染是否与前一次的渲染相同，如果两者是一样的，那么就会保留上一次的渲染结果。
也有人在 Twitter 上问了 Dan 这个问题，Dan 解释了为什么它叫做 memo 而不是像 PureComponent 那样，被叫做 memo：
Memoized component. There was a lot of feedback on the RFC which we agree with — "pure" naming is confusing because memoization (which is what memo does) has nothing to do with function "purity".
结论
这是一个对于 React 非常有用的新功能，因为我们之前只能使用 class component 来利用 PureComponent 带来的性能优势。而现在，我们有了 React.memo()，就可以使用 functional component 了
作者：可乐前端
链接：https://www.jianshu.com/p/9293daab4161
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
