React数组更新避免重复渲染技巧

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《React列表优化：数组更新不重复渲染技巧》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

本文探讨React应用中列表组件因父级数组状态更新而导致不必要重渲染的性能问题。我们将深入解析此现象，并提供两种核心优化策略：利用React.memo对子组件进行记忆化处理，以及正确设置列表元素的key属性。通过这些方法，开发者可以有效减少组件渲染次数，提升应用性能和用户体验。

理解React中的重渲染机制与列表渲染挑战

在React中，当组件的state或props发生变化时，该组件及其所有子组件默认都会重新渲染。这种机制确保了UI与数据保持同步。然而，在处理列表渲染时，这可能导致不必要的性能开销。

考虑一个常见的场景：一个父组件维护一个卡片（Card）组件的数组作为其状态。当用户执行添加或删除卡片的操作时，数组状态会更新。即使数组中大部分现有卡片的数据并未改变，React的默认行为也会导致整个列表中的所有卡片组件重新渲染。这在列表中元素数量较多或单个卡片组件渲染开销较大时，会显著影响应用性能和用户体验。

以下是一个示例代码，展示了这种不必要的重渲染行为：

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

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

const fakeObject = { fakeData1 };

// Card组件，每次渲染都会打印日志
const Card = ({ id, index, item }) => {
  console.log("Rendering Card: ", item); // 观察此日志输出
  // handleRemove 函数定义在 Card 内部，每次 App 渲染都会重新创建
  const handleRemove = (event: any | MouseEvent) => {
    if (event.type == "click" || event.type == "keydown") {
      // 这里的 setCardArray 实际上需要从父组件传递
      // 为了演示问题，这里假设它能访问到，但在实际应用中需要传递
      // 实际上，为了避免闭包问题和重渲染，handleRemove也应该传递
    }
  };
  return (
    <div style={{ border: "black solid 2px", padding: "50px 0" }}>
      <h1>Card - {id}</h1>
      <div>Content: {Object.values(item)}</div>
      {/* 这里的 remove 功能在原始代码中是直接操作父组件状态，
          为了完整演示，我们假设它能正常工作，但实际需要优化传递方式 */}
      <button onClick={handleRemove}>Remove</button>
    </div>
  );
};

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

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

  // 这里的 Card 组件在每次 App 渲染时都会重新定义或引用
  return (
    <div className="App">
      <button onClick={addCard}>Add a Card</button>
      {Object.values(cardArray)
        .flat()
        .map((item: any, index) => {
          // 使用 index 作为 key 是一个潜在的问题，稍后会讨论
          return <Card id={index} key={index} item={item} />;
        })}
    </div>
  );
}

在上述代码中，每次点击“Add a Card”按钮时，cardArray状态会更新。即使fakeData1对应的卡片没有改变，控制台也会打印出所有卡片的“Rendering Card”日志，这表明所有卡片都重新渲染了。

核心优化策略一：使用React.memo避免不必要的组件重渲染

为了解决上述问题，我们可以使用React.memo。React.memo是一个高阶组件（Higher-Order Component, HOC），它能够记忆化（memoize）函数式组件。如果包裹的组件接收到的props没有发生变化，React.memo会阻止该组件的重新渲染，直接复用上次渲染的结果。

React.memo通过对组件的props进行浅比较来决定是否重新渲染。如果props在前后两次渲染中是相同的（即引用地址相同且基本类型值相同），则组件不会重新渲染。

如何应用React.memo：

只需将需要优化的函数式组件包裹在React.memo中即可。

import "./styles.css";
import React, { useEffect, useRef, useState, useContext, memo } from "react";

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

// 将 Card 组件用 React.memo 包裹
const Card = memo(({ id, index, item, setCardArray }) => {
  console.log("Rendering Card: ", item); // 再次观察此日志输出
  const handleRemove = (event: any | MouseEvent) => {
    if (event.type == "click" || event.type == "keydown") {
      setCardArray((entityState) => {
        const updatedData: any = { ...entityState };
        delete updatedData["fakeData2"]; // 移除 Card2
        return updatedData;
      });
    }
  };
  return (
    <div style={{ border: "black solid 2px", padding: "50px 0" }}>
      <h1>Card - {id}</h1>
      <div>Content: {Object.values(item)}</div>
      <button onClick={handleRemove}>Remove</button>
    </div>
  );
});

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

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

  return (
    <div className="App">
      <button onClick={addCard}>Add a Card</button>
      {Object.values(cardArray)
        .flat()
        .map((item: any, index) => {
          // 将 setCardArray 作为 prop 传递给 Card
          return <Card setCardArray={setCardArray} id={index} key={index} item={item} />;
        })}
    </div>
  );
}

现在，当你点击“Add a Card”按钮时，你会发现只有新添加的卡片会打印“Rendering Card”日志，而原有卡片则不会，因为它们的props（id, index, item，以及setCardArray的引用）没有发生变化。

React.memo的注意事项：

• 浅比较：React.memo默认进行浅比较。这意味着如果props中包含引用类型（如对象、数组或函数），即使其内部内容未变，只要引用地址变化，组件依然会重新渲染。
• 函数作为prop：在上述示例中，setCardArray是一个稳定的函数引用（由useState返回），因此它不会导致Card组件不必要的重渲染。但如果传递的是一个在父组件每次渲染时都会重新创建的函数（例如，一个未被useCallback包裹的事件处理函数），那么React.memo将失效。
• 自定义比较函数：React.memo可以接受第二个参数，一个自定义的比较函数。你可以用它来定义更复杂的比较逻辑，例如深度比较或只比较特定prop。

核心优化策略二：正确使用key属性

除了React.memo，另一个在列表渲染中至关重要的优化点是正确使用key属性。key是React用于识别列表中各个元素的特殊字符串prop。当列表项的顺序发生变化，或者有项被添加、删除时，key帮助React高效地识别哪些元素是新的、哪些是旧的，以及哪些元素的位置发生了变化。

key的重要性：

• 性能优化：通过key，React能够进行最小化的DOM操作，避免不必要的DOM重绘。
• 状态保持：key确保React能够正确地关联组件实例及其内部状态。如果没有稳定的key，当列表项顺序变化时，组件的内部状态可能会混乱。

index作为key的潜在问题：

在上面的示例代码中，我们使用了key={index}。虽然在某些简单且列表项永不改变顺序或增删的场景下，使用index作为key可能看起来无害，但在涉及列表项的添加、删除或重新排序时，使用index作为key会带来严重的问题：

1. 性能问题：当列表项被添加或删除时，后续所有元素的index都会发生变化，导致React认为这些元素都是新的，从而全部重新渲染，即使它们的数据没有变化。这使得React.memo的优化效果大打折扣。
2. 错误行为：如果列表项具有内部状态（例如，一个输入框的值），当使用index作为key并进行列表操作时，这些内部状态可能会错误地“漂移”到不同的元素上，导致UI行为异常。

最佳实践：

始终为列表中的每个元素提供一个稳定且唯一的ID作为key。这个ID通常来自你的数据源。例如，如果你的卡片数据有一个id字段，就应该使用item.id作为key。

// 假设 item 对象中包含一个唯一的 id 字段
// return <Card setCardArray={setCardArray} id={item.id} key={item.id} item={item} />;

// 如果数据没有唯一ID，需要生成或使用库
// 例如，使用 nanoid 或 uuid 库在数据加载时为每个项生成唯一ID

在我们的示例中，fakeData结构简单，没有唯一的id。但在实际应用中，强烈建议为每个列表项分配一个稳定的唯一ID，并将其作为key。

总结与最佳实践

优化React列表渲染是提升应用性能的关键一环。通过结合使用React.memo和正确管理key属性，我们可以显著减少不必要的组件重渲染。

1. React.memo：用于记忆化函数式组件，当props未改变时阻止组件重新渲染。它通过浅比较props来工作。
2. key属性：为列表中的每个元素提供一个稳定且唯一的key。避免使用数组索引作为key，尤其是在列表项可能被添加、删除或重新排序的场景。
3. 结合useCallback和useMemo：当React.memo包裹的组件接收到引用类型（如对象、数组、函数）的props时，如果这些props的引用在父组件每次渲染时都发生变化，React.memo将失效。此时，可以使用useCallback来记忆化函数，使用useMemo来记忆化计算结果或对象，从而保持props引用的稳定性。
4. 状态的不可变性：在更新数组或对象状态时，始终创建新的数组或对象副本，而不是直接修改原始状态。这有助于React正确地检测到状态变化，并与React.memo协同工作。
5. 按需优化：并非所有组件都需要React.memo。只有当组件的渲染开销较大，且其props不经常变化时，才考虑使用React.memo。过度使用React.memo可能会引入额外的比较开销，反而降低性能。

通过理解并实践这些优化策略，开发者可以构建出更高效、响应更快的React应用。

以上就是《React数组更新避免重复渲染技巧》的详细内容，更多关于的资料请关注golang学习网公众号！