PureComponent 与 React.memo - 避免不必要的 React 组件渲染

前端

2024-01-31 03:27:10

React 组件渲染优化：PureComponent 与 React.memo

概述

React 作为一个声明式 UI 框架，通过虚拟 DOM 实现高效的组件渲染。当组件状态或属性发生变化时，React 会比较虚拟 DOM 的旧版本和新版本，仅更新发生变化的部分，提高渲染效率。

但有时组件会被不必要地重新渲染，这是由于组件内部状态管理不当或其他因素。为了避免这种现象，React 提供了 PureComponent 和 React.memo 工具。

PureComponent

PureComponent 是一个内置组件，通过浅比较 props 和 state 决定是否重新渲染组件。如果 props 和 state 都没有变化，则组件不会重新渲染。

实现原理

PureComponent 在组件更新时将当前的 props 和 state 与上一次的 props 和 state 进行浅比较。如果完全相等，则组件不会重新渲染。否则，组件将重新渲染。

使用方式

将组件类继承自 PureComponent 即可。

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.content}</p>
      </div>
    );
  }
}

React.memo

React.memo 是一个高阶组件，可防止组件在 props 和 state 没有变化时重新渲染。与 PureComponent 不同，它不进行浅比较，而是使用自定义比较函数。

比较函数

比较函数是一个纯函数，接受上一次的 props 和 state 以及当前的 props 和 state。如果返回 true，则组件不会重新渲染。否则，组件将重新渲染。

使用方式

将组件函数包装在 React.memo 中即可。

import React, { memo } from 'react';

const MyComponent = memo((props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  );
});