优化React列表渲染：使用React.memo避免不必要的组件重绘

理解列表组件的重绘问题

在react中，当父组件的状态发生变化时，它会触发自身的重新渲染，进而导致其所有子组件也默认重新渲染。对于渲染列表的场景，如果列表数据通过usestate管理，并且我们在列表中添加或移除了一个元素，即使列表中大部分现有元素的实际内容并未改变，它们也可能因为父组件的重绘而跟着重绘。这会带来不必要的性能开销，尤其当列表项复杂或数量庞大时，用户体验会受到影响。

例如，考虑以下场景：一个包含多个卡片组件的列表。当用户点击按钮添加一张新卡片时，我们期望只有新卡片被渲染，而现有卡片保持不变。然而，由于useState触发了父组件的重新渲染，导致所有卡片组件都重新执行其渲染逻辑，即使它们的props没有变化。这可以通过在子组件内部添加console.log来验证，你会发现即使未改变的卡片组件也会打印“Rendering Card”信息。

React的协调机制与key的重要性

在深入解决方案之前，理解React如何处理列表渲染至关重要。React使用一种称为“协调”（Reconciliation）的算法来高效更新UI。当状态或props发生变化时，React会构建一个新的虚拟DOM树，并与旧的虚拟DOM树进行比较，以确定实际需要更新到真实DOM的部分。

对于列表，React依赖于key属性来识别列表中每个元素的唯一性。一个稳定且唯一的key能够帮助React：

1. 识别组件身份：精确追踪哪个元素被添加、移除或重新排序。
2. 优化更新：如果一个元素的key没有改变，React会尝试复用现有的DOM元素，只更新其props。如果key改变了，React会销毁旧组件并创建新组件。

重要提示：在动态列表中，应避免使用数组索引作为key。因为当列表项的顺序发生变化、或者有元素被添加/删除时，索引会随之改变，导致React无法正确识别组件，可能引发性能问题或难以发现的bug。理想的key应是数据源中稳定且唯一的ID（例如数据库ID）。

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

为了阻止未改变的子组件进行不必要的重绘，我们可以使用React.memo。React.memo是一个高阶组件（Higher-Order Component），它会包裹一个函数式组件。当该组件的props发生变化时，React.memo会对其props进行浅层比较。如果props没有发生变化，React.memo就会阻止该组件的重新渲染，直接复用上一次的渲染结果。

如何应用React.memo

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

示例代码：

降重鸟

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

113

查看详情

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

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

// 使用 React.memo 包装 Card 组件
// 只有当 Card 组件的 props (id, item, setCardArray) 发生变化时，它才会重新渲染
const Card = memo(({ id, item, setCardArray }) => {
  // 这里的 console.log 只会在 Card 组件实际渲染或 props 变化时打印
  console.log("Rendering Card: ", item); 

  const handleRemove = (event) => {
    if (event.type === "click" || event.type === "keydown") {
      setCardArray((entityState) => {
        const updatedData = { ...entityState };
        // 注意：这里的删除逻辑是硬编码删除 fakeData2
        // 在实际应用中，你需要根据传入的 id 或其他唯一标识符来删除对应的卡片
        delete updatedData["fakeData2"]; 
        return updatedData;
      });
    }
  };

  return (
    <div style={{ border: "black solid 2px", padding: "50px 0", marginBottom: "10px" }}>
      <h1>Card - {id}</h1>
      <div>内容: {Object.values(item)}</div>
      <button onClick={handleRemove}>移除</button>
    </div>
  );
});

// 应用主组件
const fakeObject = { fakeData1 }; // 初始数据
export default function App() {
  const [cardArray, setCardArray] = useState(fakeObject);

  const addCard = () => {
    // 通过展开现有状态并添加新数据，确保状态更新的不可变性
    setCardArray((entityState) => ({
      ...entityState,
      fakeData2 // 硬编码添加 fakeData2
    }));
  };

  return (
    <div className="App">
      <button onClick={addCard}>添加一张卡片</button>
      <div style={{ marginTop: "20px" }}>
        {Object.values(cardArray)
          .flat()
          .map((item, index) => {
            // 尽管示例中使用了 index 作为 key 和 id，
            // 但在实际动态列表中，强烈建议使用数据中稳定且唯一的ID作为 key，
            // 以确保 React 能正确识别和优化组件。
            return <Card setCardArray={setCardArray} id={index} key={index} item={item} />;
          })}
      </div>
    </div>
  );
}

在上述代码中，我们将Card组件用memo包裹起来。现在，当你点击“添加一张卡片”按钮时，App组件会重新渲染，cardArray状态会更新。但由于Card组件被memo包裹，React在渲染每个Card实例之前会检查其props。对于fakeData1对应的卡片，它的id和item（以及setCardArray，因为useState返回的setter函数是稳定的）都没有改变，因此React.memo会阻止其重绘，你将不会看到“Rendering Card: Card1”再次打印。只有新添加的Card2会触发渲染。

注意事项与最佳实践

1. React.memo并非万能：

   • React.memo会进行props的浅层比较，这本身也有一定的开销。如果组件的props经常变化，或者组件本身的渲染成本很低，使用memo可能带来的性能提升微乎其微，甚至可能因为比较开销而略微降低性能。
   • 只有在组件渲染成本较高、且其父组件频繁重绘但自身props不常变化时，React.memo才能发挥最大作用。

2. 函数props与useCallback：

   • 如果memo包裹的组件接收一个函数作为prop，并且这个函数在父组件每次渲染时都会被重新创建（例如，父组件内部定义的一个普通函数），那么即使函数逻辑相同，React.memo也会因为函数引用不同而认为prop发生了变化，导致子组件重新渲染。
   • 在这种情况下，你需要使用useCallback Hook来缓存这个函数，确保它在依赖项不变的情况下，每次渲染都返回同一个函数引用。例如：

     const handleClick = useCallback(() => {
       // ...
     }, [dependency1, dependency2]);
     // 然后将 handleClick 作为 prop 传递给 memo-ized 子组件

     登录后复制
   • 值得注意的是，useState返回的setter函数（如setCardArray）是稳定的，它们不会在每次渲染时重新创建，因此直接传递它们给memo包裹的组件是安全的，不需要useCallback。

3. 状态更新的不可变性：

   • 始终以不可变的方式更新状态。这意味着当你更新一个数组或对象时，应该创建一个新的数组或对象，而不是直接修改旧的。
   • 在示例中，setCardArray((entityState) => ({ ...entityState, fakeData2 }))就是遵循不可变性的良好实践，它创建了一个新的对象来更新状态。

4. useRef的局限性：

   • 问题中提到尝试过useRef。useRef主要用于在组件的整个生命周期内持有可变值，并且它的更新不会触发组件的重新渲染。因此，虽然useRef可以存储数据，但它无法像useState那样自动触发UI更新以显示新添加的元素，这也是为什么它不适用于此场景的主要原因。

总结

通过恰当地使用React.memo，结合对key属性的正确管理和状态不可变性原则，我们可以显著优化React列表组件的渲染性能，避免不必要的重绘。这不仅能提升应用的响应速度，还能为用户带来更流畅、更高效的交互体验。在开发React应用时，性能优化是一个持续的过程，理解并运用这些核心概念将帮助你构建更加健壮和高效的组件。

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