优化React列表渲染：避免数组元素不必要的重渲染-js教程-PHP中文网

优化React列表渲染：避免数组元素不必要的重渲染

聖光之護

发布： 2025-07-28 19:42:15

原创

994人浏览过

优化React列表渲染：避免数组元素不必要的重渲染

本文深入探讨了React应用中列表组件因数组状态更新导致不必要重渲染的问题。通过详细分析问题根源，并提供解决方案，重点介绍了如何利用React.memo进行组件性能优化，同时强调了key属性的正确使用对于提升渲染效率的重要性。文章包含示例代码，帮助读者理解并实践高效的React组件渲染策略。

1. 理解React中的组件重渲染问题

在react应用开发中，当父组件的状态（state）发生变化时，默认情况下其所有子组件都会重新渲染。对于渲染列表（例如通过array.prototype.map方法）的场景，如果列表数据存储在usestate管理的数组中，那么当数组发生增删改操作时，即使某些列表项的数据并未改变，它们对应的组件也可能被重新渲染。这会带来不必要的性能开销，尤其是在列表项数量较多或组件结构复杂时，用户体验会明显下降。

考虑以下场景：一个卡片组件列表，用户可以添加或移除卡片。当添加一张新卡片时，我们期望只有新卡片被渲染，而现有卡片保持不变；当移除一张卡片时，期望被移除的卡片消失，其他卡片不受影响。然而，由于父组件的数组状态更新，导致整个列表重新渲染，所有卡片组件的渲染逻辑都会被触发，即使它们的数据没有实际变化。

以下是一个简化的示例代码，展示了这个问题：

import React, { useState } from "react";
import "./styles.css";

const fakeData1 = { Card1: [1, 2, 3, 4] };
const fakeData2 = { Card2: [5, 6, 7, 8] };

export default function App() {
  const [cardArray, setCardArray] = useState(fakeData1); // 初始状态只有一张卡片

  const addCard = () => {
    // 添加一张新卡片
    setCardArray((entityState) => ({
      ...entityState,
      fakeData2 // 添加fakeData2
    }));
  };

  const Card = ({ id, item }) => {
    // 每次渲染都会打印，用于观察重渲染情况
    console.log("Rendering Card: ", item);
    const handleRemove = () => {
      // 移除卡片
      setCardArray((entityState) => {
        const updatedData = { ...entityState };
        delete updatedData["fakeData2"]; // 移除fakeData2
        return updatedData;
      });
    };
    return (
      <div style={{ border: "black solid 2px", padding: "50px 0", margin: "10px" }}>
        <h1>Card - {id}</h1>
        <div>Content: {Object.values(item)}</div>
        <button onClick={handleRemove}>Remove Card2</button>
      </div>
    );
  };

  return (
    <div className="App">
      <button onClick={addCard}>Add Card2</button>
      {Object.values(cardArray)
        .flat()
        .map((item, index) => {
          // 注意：此处使用 index 作为 key 是不推荐的，下文会详细解释
          return <Card id={index} key={index} item={item} />;
        })}
    </div>
  );
}

登录后复制

在上述代码中，当点击“Add Card2”按钮时，cardArray状态更新，导致App组件重新渲染。由于Card组件是App组件的子组件，并且在map中迭代生成，即使Card1的数据没有变化，其console.log("Rendering Card: ", item)也会再次打印，表明它被重新渲染了。

2. 解决方案：利用 React.memo 优化组件渲染

为了避免不必要的子组件重渲染，React 提供了 React.memo 这个高阶组件（Higher-Order Component, HOC）。React.memo 会对组件的 props 进行浅层比较，如果 props 没有发生变化，则跳过该组件的重新渲染，直接复用上一次的渲染结果。

将 Card 组件包装在 React.memo 中，可以有效地阻止其在 props 未变时重渲染：

import React, { useState, memo } from "react"; // 引入 memo
import "./styles.css";

const fakeData1 = { Card1: [1, 2, 3, 4] };
const fakeData2 = { Card2: [5, 6, 7, 8] };

// 使用 React.memo 包装 Card 组件
const Card = memo(({ id, item, setCardArray }) => {
  console.log("Rendering Card: ", item); // 观察重渲染情况
  const handleRemove = () => {
    setCardArray((entityState) => {
      const updatedData = { ...entityState };
      delete updatedData["fakeData2"];
      return updatedData;
    });
  };
  return (
    <div style={{ border: "black solid 2px", padding: "50px 0", margin: "10px" }}>
      <h1>Card - {id}</h1>
      <div>Content: {Object.values(item)}</div>
      <button onClick={handleRemove}>Remove Card2</button>
    </div>
  );
});

export default function App() {
  const [cardArray, setCardArray] = useState(fakeData1);

  const addCard = () => {
    setCardArray((entityState) => ({
      ...entityState,
      fakeData2
    }));
  };

  return (
    <div className="App">
      <button onClick={addCard}>Add Card2</button>
      {Object.values(cardArray)
        .flat()
        .map((item, index) => {
          // 注意：setCardArray 作为 prop 传递给 Card，因为它在 Card 内部被使用
          // 这里的 key 仍然是 index，下文会进一步优化
          return <Card setCardArray={setCardArray} id={index} key={index} item={item} />;
        })}
    </div>
  );
}

登录后复制

通过上述修改，当点击“Add Card2”按钮时，Card1组件将不再重渲染，只有新添加的Card2组件会渲染。当点击“Remove Card2”时，Card2组件会被卸载，Card1组件也不会重渲染。console.log的输出将验证这一行为。

注意事项：

props 传递： 如果子组件（如 Card）需要修改父组件（如 App）的状态，那么管理状态的更新函数（如 setCardArray）需要作为 prop 传递给子组件。useState返回的set函数是稳定的，因此将其作为prop传递不会导致React.memo失效。
浅层比较： React.memo 默认执行的是 props 的浅层比较。这意味着如果 prop 是一个对象或数组，并且它的引用发生了变化（即使内容没变），React.memo 仍然会认为 prop 发生了变化，从而导致组件重渲染。在这种情况下，可能需要配合 useCallback 来 memoize 函数 prop，以及 useMemo 来 memoize 对象或数组 prop。

3. key 属性的重要性与优化

在React中渲染列表时，key 属性是至关重要的。它帮助React识别哪些列表项被添加、移除或重新排序，从而进行高效的DOM更新。

为什么不推荐使用 index 作为 key？

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

在上述示例中，我们使用了 index 作为 key。对于静态列表或列表项顺序不会改变的场景，使用 index 勉强可行。但对于动态列表（如添加、移除、重新排序），使用 index 作为 key 会导致以下问题：

性能问题： 当列表项的顺序发生变化时（例如在中间插入或删除一个元素），所有后续元素的 index 都会改变。React会认为这些是新的组件，导致它们全部重新渲染，而不是仅仅移动或更新真正改变的组件。
状态问题： 如果列表项是带有内部状态的组件，当它们的位置发生变化时，React可能会错误地复用或销毁组件，导致内部状态混乱或丢失。

正确的 key 使用原则：

唯一性： key 必须在同级列表中是唯一的。
稳定性： key 应该是数据项的唯一标识符，且在数据生命周期内保持不变。通常，后端返回的数据会包含一个唯一的ID（如 id 或 uuid），这是最佳的 key 选择。
避免使用 index： 除非你确定列表是静态的且不会发生任何增删改排序。

在我们的示例中，fakeData1 和 fakeData2 结构简单，没有明确的唯一ID。如果数据结构允许，我们应该为每个卡片数据分配一个唯一的ID。例如：

const fakeData1 = { Card1: { id: "card-1", data: [1, 2, 3, 4] } };
const fakeData2 = { Card2: { id: "card-2", data: [5, 6, 7, 8] } };

登录后复制

然后，在 map 中使用这个唯一的 id 作为 key：

// ...
{Object.values(cardArray)
  .flat()
  .map((item) => {
    // 假设 item 是 { id: "unique-id", data: [...] }
    const cardId = Object.keys(item)[0]; // 这里用卡片名称作为key，但更推荐数据自带唯一id
    return <Card setCardArray={setCardArray} id={cardId} key={cardId} item={item} />;
  })}
// ...

登录后复制

在当前示例的fakeData结构中，item实际上是{ Card1: [...] }或{ Card2: [...] }。我们可以用Object.keys(item)[0]（即"Card1"或"Card2"）作为相对稳定的key，因为它在卡片生命周期内是固定的，并且在当前数据集中是唯一的。

4. 总结

优化React列表的渲染性能是前端开发中的常见挑战。通过结合使用 React.memo 和正确管理 key 属性，我们可以显著减少不必要的组件重渲染，从而提升应用的性能和用户体验。

React.memo: 适用于功能组件，通过浅层比较 props 来避免不必要的重渲染。当组件的 props 没有变化时，React.memo 会阻止组件的重新渲染。
key 属性: 对于动态列表至关重要，它帮助 React 准确识别列表项的变化。始终使用稳定、唯一的 key，并避免在动态列表中使用 index 作为 key。

在实际项目中，请根据组件的特点和数据结构，合理选择并应用这些优化策略，以构建高性能的React应用。

以上就是优化React列表渲染：避免数组元素不必要的重渲染的详细内容，更多请关注php中文网其它相关文章！