了解 React.memo 以实现 React 性能优化-js教程-PHP中文网

了解 React.memo 以实现 React 性能优化

Linda Hamilton

发布： 2024-12-24 20:21:14

原创

177 人浏览过

Understanding React.memo for Performance Optimization in React

React.memo 是一个高阶组件 (HOC)，它通过防止不必要的重新渲染来帮助优化 React 组件的性能。它用于记忆功能组件，这意味着如果组件的 props 没有改变，React 将跳过重新渲染组件。这对于大型 React 应用程序的性能优化特别有用，因为重新渲染的成本可能很高。

React.memo 的工作原理

React.memo 的工作原理是对组件的 props 进行浅层比较。如果 props 与之前的渲染相同，React 将跳过渲染组件并使用之前渲染的结果。这可以显着减少重新渲染的次数并提高性能，特别是在渲染大型列表或昂贵的组件时。

句法

const MemoizedComponent = React.memo(Component);

登录后复制

地点：

Component 是你想要记住的功能组件。
MemoizedComponent 是组件的新记忆版本。

示例：React.memo 的基本用法

让我们看一个如何使用 React.memo 的简单示例：

import React, { useState } from 'react';

const ChildComponent = React.memo(({ name }) => {
  console.log("Child component re-rendered");
  return <div>Hello, {name}!</div>;
});

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

  return (
    <div>
      <ChildComponent name={name} />
      <button onClick={() => setName('Doe')}>Change Name</button>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <p>Count: {count}</p>
    </div>
  );
}

export default App;

登录后复制

解释：

ChildComponent 包装在 React.memo 中。它仅在 name 属性更改时重新渲染。
App 有两个状态：名称和计数。单击“递增计数”按钮不会更改 name 属性，因此当计数状态更新时，ChildComponent 不会重新渲染。
如果单击“更改名称”，name 属性会更改，导致 ChildComponent 重新渲染。

输出：

当您单击“递增计数”按钮时，ChildComponent 将不会重新渲染，但当 name 属性更改时，它会记录“子组件重新渲染”。

与 React.memo 的自定义比较

默认情况下，React.memo 对 props 执行浅层比较，但如果您需要更多地控制 props 的比较方式，您可以提供自定义比较函数。

如果组件应该不重新渲染，则自定义比较函数应该返回 true，如果应该重新渲染，则应该返回 false。

示例：自定义比较函数

const ChildComponent = React.memo(
  ({ name, age }) => {
    console.log("Child component re-rendered");
    return <div>Hello, {name}, {age}!</div>;
  },
  (prevProps, nextProps) => {
    // Custom comparison: only re-render if name changes
    return prevProps.name === nextProps.name;
  }
);

function App() {
  const [name, setName] = useState('John');
  const [age, setAge] = useState(30);

  return (
    <div>
      <ChildComponent name={name} age={age} />
      <button onClick={() => setName('Doe')}>Change Name</button>
      <button onClick={() => setAge(age + 1)}>Increment Age</button>
    </div>
  );
}

登录后复制

在此示例中，由于自定义比较功能，ChildComponent 仅在 name 属性更改时才会重新渲染，即使 Age 属性更改也是如此。