关于react.js:Reactmemo

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.tsx
import 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.tsx
import React from 'react';

const Child = (props) => {console.log('child render update');
 return <div>{props.msg}</div>
}

export default Child;

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

当应用 React.memo 后

// Child.tsx
import 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…