使用 React Memo 告别不必要的重新渲染：分步教程

React Memo：通过简单的记忆提高 React 性能

介绍

React 应用程序通常处理大型数据集和复杂的组件，其中不必要的重新渲染会显着影响性能。为了解决这个问题，React 提供了 React.memo——一个简单但功能强大的工具，可以优化组件并减少渲染时间。在本指南中，我们将探讨 React Memo 的工作原理、它为何有用以及如何逐步实现它。

---

什么是 React 备忘录？

React.memo 是 React 中的一个高阶组件 (HOC)，有助于记忆功能组件。记忆化是根据函数的输入缓存函数输出的过程，因此函数不必为相同的输入重新计算结果。 React Memo 的工作原理类似：它“记住”组件的最后渲染输出，并且仅在其 props 更改时重新渲染它。

为什么要反应备忘录？

在 React 中，只要父组件重新渲染，组件就会重新渲染。如果组件的输出不依赖于其父组件的更改，这可能会导致效率低下。例如，在具有许多组件的复杂 UI 中，您可能会因过度重新渲染而出现延迟。使用 React Memo 可以通过仅在必要时更新组件来优化这一点。

---

React Memo 解决的问题

1. 不必要的重新渲染

当父组件重新渲染时，其子组件也会重新渲染。这可能会导致性能瓶颈，尤其是当组件显示静态数据或依赖于不变的 props 时。

2. 复杂 UI 中的延迟或性能缓慢

具有深度嵌套组件的应用程序可能会因累积重新渲染而面临性能下降的问题。 Memoization 与 React Memo 一起有助于防止重新渲染不需要更新的组件，从而增强应用程序的响应能力。

---

React Memo 的工作原理：分步示例

让我们看一下 React Memo 的基本实现。我们将从一个不使用记忆化的简单组件开始，看看添加 React Memo 如何产生影响。

第 1 步：设置一个没有 React Memo 的简单计数器组件

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1>Count: {count}</h1>;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

解释

在此示例中，每次在输入字段中键入内容时，即使计数值保持不变，计数器组件也会重新呈现。这是不必要的重新渲染，我们可以使用 React Memo 来防止。

第 2 步：使用 React Memo 进行优化

现在，让我们用 React.memo 包装 Counter 组件来优化它。

import React, { useState } from 'react';

function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1>Count: {count}</h1>;
}

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

解释

使用 React.memo，Counter 组件仅在其 count 属性发生变化时才会重新渲染。现在，在输入字段中键入内容不再触发 Counter 的重新渲染，从而显着优化了性能。

---

React Memo 实际应用：带有列表的实际场景

让我们深入研究一个更复杂的示例，看看 React Memo 的真正好处。假设我们有一个项目列表，每个项目旁边都有一个“喜欢”按钮。我们将演示 React Memo 如何在点赞单个项目时防止过度重新渲染。

第1步：创建不带备忘录的列表组件

import React, { useState } from 'react';

const Counter = React.memo(function Counter({ count }) {
  console.log('Counter component re-rendered');
  return <h1>Count: {count}</h1>;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something..." />
    </div>
  );
}

export default App;

问题

在上面的代码中，当您喜欢一项时，所有项目都会重新渲染，即使只有一项的喜欢发生变化。

步骤 2：使用 React Memo 优化 Item 组件

import React, { useState } from 'react';

function Item({ item, onLike }) {
  console.log(`Rendering ${item.name}`);
  return (
    <div>
      <h2>{item.name}</h2>
      <button onClick={() => onLike(item.id)}>Like</button>
    </div>
  );
}

function ItemList() {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', likes: 0 },
    { id: 2, name: 'Item 2', likes: 0 },
    { id: 3, name: 'Item 3', likes: 0 },
  ]);

  const handleLike = (id) => {
    setItems((prevItems) =>
      prevItems.map((item) =>
        item.id === id ? { ...item, likes: item.likes + 1 } : item
      )
    );
  };

  return (
    <div>
      {items.map((item) => (
        <Item key={item.id} item={item} onLike={handleLike} />
      ))}
    </div>
  );
}

export default ItemList;

结果

现在，只有您点击喜欢的项目才会重新渲染，从而使 UI 更快、更高效。

---

何时使用 React 备忘录？

React Memo 在特定场景下很有用，但在任何地方使用它都会使你的代码变得复杂，而不会带来真正的好处。以下是一些特别有效的关键情况：

1. 静态组件：不经常更改的组件，例如页眉或页脚。
2. 纯功能组件：仅依赖 props 进行渲染的组件。
3. 大型组件列表：包含许多需要避免不必要的重新渲染的项目的列表。

---

潜在的陷阱和最佳实践

1. 浅比较：React Memo 进行浅比较，这意味着它不会检测深层嵌套对象或数组中的更改。如果您要传递复杂的道具，请考虑使用 useMemo 或 useCallback。

2. 性能监控：使用 React DevTools 来识别哪些组件真正受益于记忆化。过度使用 React Memo 会导致代码变得复杂，而性能提升却可以忽略不计。

---

常见问题 (FAQ)

Q1：React Memo 与 useMemo 和 useCallback 有何不同？

• React Memo 根据 props 优化组件重新渲染。
• useMemo 在组件内缓存计算值。
• useCallback 缓存函数，防止它们在每次渲染时重新创建。

Q2：我可以将 React Memo 与类组件一起使用吗？

不，React Memo 仅适用于功能组件。但是，对于类组件，可以使用 PureComponent 实现类似的行为。

---

结论

React Memo 是一个有价值的工具，可以减少不必要的重新渲染并提高 React 应用程序性能。通过有选择地在纯功能组件或静态 UI 元素上使用它，您可以优化 React 应用程序，而无需使其结构复杂化。按照以下步骤操作，尝试示例，并不断尝试为您的项目找到最佳记忆策略！

以上是使用 React Memo 告别不必要的重新渲染：分步教程的详细内容。更多信息请关注PHP中文网其他相关文章！