React 第二十六章 React.memo

aXin_li2024-05-15 18:13

React.memo 是 React 提供的一个高阶组件，用于对函数组件进行性能优化。

React.memo 的源码实际上就是返回一个 PureComponent 组件：

js 复制代码

function memo(FuncComp){
	return class Memo extends PureComponent{
      render(){
           return <>{FuncComp(this.props)}</>
        }
    }
}

官方地址： https://zh-hans.legacy.reactjs.org/docs/react-api.html#reactmemo

React.memo 接受一个组件作为参数，并返回一个新的优化过的组件。这个新的组件在接收到新的 props 时，会进行浅比较来判断是否需要重新渲染。

使用 React.memo 可以避免不必要的重新渲染，提高组件的性能。

使用方法如下：

js 复制代码

import React from 'react';

const MyComponent = React.memo((props) => {
  // 组件的渲染逻辑
  // ...
});

export default MyComponent;

需要注意的是，React.memo 默认只进行浅比较，如果组件的 props 是一个复杂对象，需要自定义比较函数来判断是否需要重新渲染。

比较函数需要返回一个布尔值

true 表示不重新渲染
false 表示重新渲染。

比较函数可以通过第二个参数传入 React.memo：

jsx 复制代码

import React from 'react';

const MyComponent = React.memo((props) => {
  // 组件的渲染逻辑
  // ...
}, (prevProps, nextProps) => {
  // 自定义比较函数
  // 返回 true 或 false
});

React.memo 可以应用于函数组件和类组件，但是对于类组件，它只会对 props 进行浅比较。如果需要对类组件的 state 进行优化，可以考虑使用 React.PureComponent。