为什么 React 会重新渲染我未更改的列表项？我怎样才能防止这种情况？

Question

我试图了解 React 呈现列表项的方式。

我已将我的问题归结为一些非常简单的代码（如下所示）(sandbox here)。它只是一个包含 3 个项目的列表和一个在此列表末尾附加 3 个项目的按钮。

我想防止 React 在添加额外项目时重新渲染前三个项目。最初我认为如果我正确设置了我的“键”，这是自动完成的，我相信我已经做到了。这不起作用，所以我尝试将列表组件包装在React.memo 中。但是控制台显示，当我希望只渲染 3 个额外的项目时，我仍在重新渲染 6 个项目。

这是为什么？我觉得这可能与我在使用setArr 设置状态时更改包含该项目的arr 数组有关，也许有一种方法可以防止这种情况发生。但我不知道它是什么。我做错了什么？

提前致谢。

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

export default function App() {
  const [arr, setArr] = useState(["a", "b", "c"]);

  const addItem = () => {
    const extraItems = ["d", "e", "f"];
    setArr((arr) => [...arr, ...extraItems]);
  };

  const SimpleComponent = memo(({ text }) => {
    console.log("Rendered ", text);
    return <li>{text}</li>;
  }, true);

  return (
    <div className="App">
      <ul>
        {arr.map((item) => {
          return <SimpleComponent key={item} text={item} />;
        })}
      </ul>

      <button onClick={() => addItem()}>Add more</button>
    </div>
  );
}

Answer 1

问题是你的备忘录在组件内部，所以它会在每次渲染时重新创建，这使得这一切都毫无意义，momoized 组件需要在使用它的组件之外，试试

const SimpleComponent = memo(({ text }) => {
  console.log("Rendered ", text);
  return <li>{text}</li>;
});

export default function App() {
  const [arr, setArr] = useState(["a","b","c"]);

  const addItem = () => {
    const extraItems = ["d", "e", "f"];
    setArr((arr) => [...arr, ...extraItems]);
  };

  return (
    <div className="App">
      <ul>
        {arr.map((item) => {
          return <SimpleComponent key={item} text={item} />;
        })}
      </ul>

      <button onClick={() => addItem()}>Add more</button>
    </div>
  );
}