React.memo() --- 函数组件专有优化
React 16.6.0 正式发布了!这次主要更新了两个新的重要功能:
- React.memo()
- React.lazy(): 使用 React 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?
它会检查接下来的渲染是否与前一次的渲染相同,如果两者是一样的,那么就会保留上一次的渲染结果。
结论
此方法仅作为性能优化的方式而存在。但请不要依赖它来“阻止”渲染,因为这会产生 bug。
这是一个对于 React 非常有用的新功能,因为我们之前只能使用 class component 来利用 PureComponent 带来的性能优势。而现在,我们有了 React.memo(),就可以使用 functional component 了!
参考
https://www.jianshu.com/p/9293daab4161