React函数组件使用React.memo避免重复渲染

在react类组件中，我们可以通过shouldComponentUpdate主动控制组件是否需要渲染，那么在函数组件中，有没有类似的方法可以让我们主动控制组件渲染？羊毛布？是的，那就是React.memo。React官方文档的介绍：类组件可以在inputprops相同的情况下使用PureComponent或者shouldComponentUpdatebailoutrendering。现在，您可以通过将功能组件包装在React.memo中来对它们执行相同的操作。类组件使用pureComponent或shouldComponent将避免渲染。您现在可以通过使用React.memo包装组件来实现相同的效果。constMyComponent=React.memo(functionMyComponent(props){/*仅当props改变时才重新渲染*/});基于此，做了一个功能包：MemoComponentimportReact,{useState}from"react";importisEqualfrom"react-fast-compare";/***默认比较方法*用户可以自己实现比较方法*@param{*}prepProps*@param{*}nextProps*@returns*/functiondefaultCompareFunc(prepProps,nextProps){try{returnisEqual(prepProps,nextProps);}catch(error){console.warn("比较错误",error);}returnfalse;}functionContainer(props){const{RenderItem,...otherProps}=props;return}/****@param{*}component要缓存的组件*@param{*}compare缓存方法，如果不传则使用默认比较方法*@returns*/functionMemoComponent(component,compare=defaultCompareFunc){constmemoComponent=React.memo(component,compare);return(props)=>{return}}exportdefaultMemoComponent;通常使用方法importReactfrom"react"importMemoComponentfrom"memoComponent"functionComponent(props){return(

)}constcomponentWithMemo=MemoComponent(Component);exportdefaultcomponentWithMemo;结合dva使用方法:importReactfrom"react"importMemoComponentfrom"memoComponent"functionComponent(props){return()}exportdefaultconnect(({Component,loading})=>({Component,loading:loading,}))(MemoComponent(Component));