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

理解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 (
    

      
Card - {id}
      
Content: {Object.values(item)}
      {/* 这里的 remove 功能在原始代码中是直接操作父组件状态，
          为了完整演示，我们假设它能正常工作，但实际需要优化传递方式 */}
      Remove
    
  );
};

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

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

  // 这里的 Card 组件在每次 App 渲染时都会重新定义或引用
  return (
    

      Add a Card
      {Object.values(cardArray)
        .flat()
        .map((item: any, index) => {
          // 使用 index 作为 key 是一个潜在的问题，稍后会讨论
          return ;
        })}
    
  );
}

在上述代码中，每次点击“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 (
    

      
Card - {id}
      
Content: {Object.values(item)}
      Remove
    
  );
});

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

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

  return (
    

      Add a Card
      {Object.values(cardArray)
        .flat()
        .map((item: any, index) => {
          // 将 setCardArray 作为 prop 传递给 Card
          return ;
        })}
    
  );
}

现在，当你点击“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 ;

// 如果数据没有唯一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学习网公众号！