React之React.memo()

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);

这就是 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
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。