1、React.memo()是什么？

React 16.6.0版本钟次要更新了两个新的性能，帮忙进步渲染性能：

  • React.memo()
  • React.lazy(): 应用 React Suspense 进行代码拆分和懒加载

本文只介绍React.memo()

React.memo()和PureComponent很类似，都是用来管制组件何时渲染的。咱们都晓得当组件props和state产生扭转时，以后组件以及其子孙组件会从新渲染，然而有一些组件（纯文本组件）是不须要从新渲染的，这种不须要的组件被从新渲染会影响整体的渲染性能。

通过管制组件何时渲染能够帮忙咱们解决这个问题，在React中能够用来优化组件性能的办法大略有以下几种:

  • 组件懒加载(React.lazy(...)和<Suspense />)
  • PureComponent
  • shouldComponentUpdate(...){...}生命周期函数
  • React.memo

与PureComponent不同的是，React.memo()是一个高阶组件，用于函数组件，通过对前后props进行浅比拟，如果前后props不统一，该组件将从新渲染，反之，不进行渲染，应用缓存中的组件。

function memo<T extends ComponentType<any>>( Component: T, propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean ): MemoExoticComponent<T>;

memo函数第二个参数接管一个函数，该函数比拟前后props是否统一。

2、React.memo应用前后比拟

举个例子看看React.memo的应用，当不应用React.memo：

// Parent.tsximport React, { useState } from 'react';import Child from '../Child';const Parent = () => { const [count, setCount] = useState(0); console.log('parent render update') return (     <React.Fragment>         <div>{count}</div>         <button onClick={() => setCount(count + 1)}>++++</button>         <Child msg='test'/>     </React.Fragment> )}export default Parent;
// Child.tsximport React from 'react';const Child = (props) => { console.log('child render update'); return <div>{props.msg}</div>}export default Child;

当父组件扭转state时，Child组件也从新渲染了

当应用React.memo后

// Child.tsximport React from 'react';const Child = (props) => { console.log('child render update'); return <div>{props.msg}</div>}export default React.memo(Child);

控制台打印后果

Child组件没有从新渲染，因为前后props没有扭转。

3、类组件中管制渲染

3.1、shouldComponentUpdate

为了防止React组件的无用渲染，咱们能够实现本人的shouldComponentUpdate生命周期函数。

当React想要渲染一个组件的时候，它将会调用这个组件的shouldComponentUpdate函数, 这个函数会通知它是不是真的要渲染这个组件。

将Child组件改写一下就能够达到管制成果

import React from 'react';class Child extends React.Component {     shouldComponentUpdate(nextProps, nextState) {         if (this.props.msg === nextProps.msg) {             return false;         }         return true;     }     render() {         return <div>test</div>     }}export default Child;

3.2、PureComponent

PureComponent外部有监听props是否扭转（浅比拟），类组件继承PureComponent就能够管制渲染

import React from 'react';class Child extends React.PureComponent { render() {     return <div>test</div> }}export default Child;

4、总结

平时开发中应该对渲染性能有肯定优化意识，React团队始终在致力于性能的晋升，提出了很多新的API以及hooks，咱们应该去理解、学习这些新常识，把开发做到极致！

参考：
https://segmentfault.com/a/11...
https://www.jianshu.com/p/929...