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

在react的类组件里，我们可以通过shouldComponentUpdate来主动控制组件是否需要渲染,那么在函数组件里，有没有类似的方法可以让我们主动控制组件渲染呢？有的，那就是React.memo。
React官方文档给出的介绍:

Class components can bail out from rendering when their input props are the same using PureComponent or shouldComponentUpdate. Now you can do the same with function components by wrapping them in React.memo.类组件在使用了pureComponent或shouldComponent的时候会避免渲染。你现在可以通过使用React.memo包裹组件来实现同样的效果。

const MyComponent = React.memo(function MyComponent(props) { /* only rerenders if props change */ });

基于此做了个函数封装:MemoComponent

import React, { useState } from "react"; import isEqual from "react-fast-compare"; /** * 默认比较方法 * 使用者可以自行实现compare方法 * @param {*} prepProps * @param {*} nextProps * @returns */ function defaultCompareFunc(prepProps, nextProps) { try { return isEqual(prepProps, nextProps); } catch (error) { console.warn("compare error", error); } return false; }function Container(props) { const { RenderItem, ...otherProps } = props; return }/** * * @param {*} component 要缓存的组件 * @param {*} compare 缓存的方法,不传则使用默认比较方法 * @returns */ function MemoComponent(component, compare = defaultCompareFunc) { const memoComponent = React.memo(component, compare); return (props) => { return } }export default MemoComponent;

一般使用方法

import React from "react" import MemoComponent from "memoComponent"function Component(props){ return ( Hello World ) }const componentWithMemo = MemoComponent(Component); export default componentWithMemo;

【react函数组件使用React.memo避免重复渲染】结合dva使用方法:

import React from "react" import MemoComponent from "memoComponent"function Component(props){ return ( Hello World ) }export default connect(({ Component, loading }) => ({ Component, loading: loading, }))(MemoComponent(Component));