如何将 React.memo 应用于数组中的所有组件？

Question

是否可以将 React.memo 应用于带有 for 循环的组件数组？
假设我有以下三个组件：

const Item1 = (props) => {
    const { index } = props;
    return (
        <div>{index}</div>
        );      
}

const Item2 = (props) => {
    const { index } = props;
    return (
        <div>{index}</div>
        );      
}

const Item3 = (props) => {
    const { index } = props;
    return (
        <div>{index}</div>
        );      
}

我可以在我的 App 组件中执行此操作吗？

const App = (props) => {
    const items = [Item1, Item2, Item3];
    let itemarray = [];
    let index = 0;
    for (const item of items) {
        const MemoizedItem = React.memo(item);
        itemarray.push(<MemoizedItem key={index} index={index} />);
        index++;
    }
    return (
        <div>
            {itemarray}
        </div>
        );
}

我知道我可以为这三个项目中的每一个（见下文）硬编码 React.memo，但我希望能够迭代地完成它。

const Item1 = React.memo((props) => {
    const { index } = props;
    return (
        <div>{index}</div>
        );      
});

//...same for Item2 and Item3

Answer 1

在渲染过程中调用 React.memo 是个坏主意。 它将产生与预期目标完全相反的效果。 您将强制它进行额外的渲染，而不是能够跳过渲染。

当你调用 React.memo 并传入一个组件时，返回的是一种新类型的组件。 不是新实例，是新类型。 React 告知从一个渲染到下一个渲染发生了什么变化的主要方式是通过比较组件上的类型。 如果类型发生变化，则假定它是不同的，因此旧组件将被卸载并重新安装新组件。 每次 App 渲染时，它都会创建全新类型的组件，这意味着从一个渲染到下一个渲染不会保存任何内容。

我建议只在实现 Item1、Item2、Item3 的地方使用 React.Memo。 但是如果你绝对需要动态地做它，那么你需要确保你只做一次，这基本上意味着你需要记住记忆：

const App = (props) => {
  const items = [Item1, Item2, Item3];
  const memoizedItems = useMemo(() => {
    return items.map(item => React.Memo(item));
  }, [])

  let itemarray = [];
  let index = 0;
  for (const MemoizedItem of memoizedItems) {
    itemarray.push(<MemoizedItem key={index} index={index} />);
    index++;
  }
  return (
    <div>
      {itemarray}
    </div>
  );
}

Answer 2

编辑：不推荐这个答案。 它完全破坏了 React Memo 的意义。 检查接受的答案，因为它解释了正确的方法。

我认为那会起作用。 我宁愿使用数组的map方法来完成它。

const App = (props) => {
    const items = [Item1, Item2, Item3];
    return (
        <div>
            {items.map((item, index) => {
                const MemoizedItem = React.memo(item);
                return <MemoizedItem key={index} index={index} />
            }}
        </div>
    );
}