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>
  );
}

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>
  );
}

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

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