如何避免数组更新时 React 组件的重复渲染

本文旨在解决React中数组状态更新导致不必要组件重新渲染的问题。通过利用 React.memo 高阶组件，可以有效地避免在数组元素未发生实际变化时，组件的重复渲染，从而优化React应用的性能。本文将详细介绍 React.memo 的使用方法，并通过示例代码演示如何在添加或删除数组元素时，只渲染必要的组件。

在React应用开发中，当使用 useState 管理数组状态时，每次数组更新（例如添加或删除元素）都会触发整个数组的重新渲染。在某些情况下，这会导致性能问题，尤其是在数组包含大量复杂组件时。理想情况下，我们希望只渲染那些真正发生变化的组件，而保持其他组件不变。React.memo 提供了一种有效的解决方案。

React.memo 是一个高阶组件，用于记忆组件的渲染结果。默认情况下，它会对组件的 props 进行浅比较，如果 props 没有发生变化，则会跳过重新渲染，直接使用之前缓存的结果。

使用方法：

要使用 React.memo，只需将其包裹在你的组件外部即可。

import React, { memo } from 'react';

const MyComponent = memo(function MyComponent(props) {
  // 使用 props 渲染
  return (
    <div>{props.data}</div>
  );
});

export default MyComponent;

示例：避免数组元素重复渲染

降重鸟

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

113

查看详情

以下示例代码演示了如何使用 React.memo 避免在添加或删除数组元素时，不必要组件的重新渲染。

import React, { memo, useState } from 'react';

const Card = memo(({ id, item, setCardArray }) => {
  console.log(`Rendering Card: ${id}`);

  const handleRemove = () => {
    setCardArray(prevState => {
      const updatedData = { ...prevState };
      delete updatedData[id]; // Assuming 'id' is the key in the object
      return updatedData;
    });
  };

  return (
    <div style={{ border: 'black solid 2px', padding: '50px 0' }}>
      <h1>Card - {id}</h1>
      <div>Content: {JSON.stringify(item)}</div>
      <button onClick={handleRemove}>Remove</button>
    </div>
  );
});

function App() {
  const [cardArray, setCardArray] = useState({
    Card1: [1, 2, 3, 4],
    Card2: [5, 6, 7, 8]
  });

  const addCard = () => {
    setCardArray(prevState => ({
      ...prevState,
      Card3: [9, 10, 11, 12]
    }));
  };

  return (
    <div className="App">
      <button onClick={addCard}>Add a Card</button>
      {Object.entries(cardArray).map(([key, item]) => (
        <Card key={key} id={key} item={item} setCardArray={setCardArray} />
      ))}
    </div>
  );
}

export default App;

代码解释：

1. Card 组件: 使用 React.memo 包裹，这意味着只有当 Card 组件的 props 发生变化时，才会重新渲染。
2. handleRemove 函数: 用于从 cardArray 状态中删除对应的卡片。
3. addCard 函数: 用于向 cardArray 状态中添加新的卡片。
4. App 组件: 使用 Object.entries 遍历 cardArray 对象，并为每个卡片渲染一个 Card 组件。 key prop 设置为卡片的唯一标识符，这对于React的diff算法至关重要。
5. setCardArray 函数: 传递到Card组件，允许子组件更新父组件的状态。

注意事项：

• Props 浅比较: React.memo 默认执行浅比较。如果你的 props 包含复杂对象或数组，并且这些对象或数组的内容发生了变化，但引用没有改变，React.memo 可能无法检测到变化，导致组件没有重新渲染。在这种情况下，你可以提供自定义的比较函数作为 React.memo 的第二个参数。
• Key Prop: 确保你的组件都有唯一的 key prop，这有助于 React 正确地识别和更新组件。
• 避免过度使用: React.memo 并非银弹。在简单的组件上使用 React.memo 可能会适得其反，因为浅比较本身也需要消耗一定的性能。只有在组件渲染成本较高，并且 props 变化不频繁时，才应该考虑使用 React.memo。

总结：

React.memo 是一个强大的工具，可以帮助你优化React应用的性能，避免不必要的组件重新渲染。通过合理地使用 React.memo，你可以显著提高应用的响应速度和用户体验。记住，在决定使用 React.memo 之前，要仔细评估组件的渲染成本和 props 变化频率，确保它能够真正带来性能提升。

以上就是如何避免数组更新时 React 组件的重复渲染的详细内容，更多请关注php中文网其它相关文章！