了解 Reactmemo 以实现 React 性能优化

hao123数码19/12/2024 20:18:1400

了解 Reactmemo 以实现 React 性能优化-第1张图片-海印网

React.memo 提升 React 应用性能的利器！它是一个高阶组件 (HOC)，通过避免不必要的重新渲染来优化组件性能。它主要用于记忆功能组件，只有当组件的 props 发生变化时才会触发重新渲染。对于大型应用，这能显著降低渲染开销。

React.memo 工作原理

React.memo 使用浅比较来检测 props 是否发生变化。如果 props 与上一次渲染相同，则会跳过重新渲染，直接使用缓存的渲染结果。这在渲染大型列表或计算成本高的组件时尤其有效。

语法

const 记忆组件 = React.memo(组件);

登录后复制

其中：

组件是你想要记忆的功能组件。
记忆组件是记忆后的组件版本。

React.memo 基本用法示例

以下示例展示如何使用 React.memo：

import React, { useState } from 'react';

const 子组件 = React.memo(({ name }) => {
  console.log("子组件重新渲染");
  return <p>你好，{name}!</p>;
});

function App() {
  const [name, setName] = useState('John');
  const [count, setCount] = useState(0);

  return (
    <p>
      <子组件 name={name} />
      <button onClick={() => setName('Doe')}>更改名称</button>
      <button onClick={() => setCount(count + 1)}>递增计数</button>
      <p>计数：{count}</p>
    </p>
  );
}

export default App;

登录后复制

说明：

子组件使用 React.memo 记忆。只有 name 属性变化时才会重新渲染。
App 组件有两个状态：name 和 count。点击“递增计数”按钮不会影响 name，因此子组件不会重新渲染。
点击“更改名称”按钮会改变 name，从而触发子组件重新渲染。

输出：

点击“递增计数”按钮，控制台不会输出“子组件重新渲染”；而更改 name 属性则会输出该日志。

自定义比较函数

React.memo 默认进行浅比较，但你可以提供自定义比较函数来更精细地控制比较逻辑。

自定义比较函数返回 true 表示不重新渲染，返回 false 表示需要重新渲染。

自定义比较函数示例

const 子组件 = React.memo(
  ({ name, age }) => {
    console.log("子组件重新渲染");
    return <p>你好，{name}，{age}岁!</p>;
  },
  (prevProps, nextProps) => {
    // 自定义比较：仅当 name 改变时才重新渲染
    return prevProps.name === nextProps.name;
  }
);

登录后复制

在这个例子中，即使 age 变化，子组件只有在 name 变化时才会重新渲染。