在渲染过程中调用React.memo是一个糟糕的主意，它会产生与预期目标完全相反的效果，而不是能够跳过渲染，而是强制它进行额外的渲染。
当你调用React.memo并传入一个组件时，返回的是一个新类型的组件。不是一个新示例，而是一个新类型。react告诉你从一个渲染到下一个渲染发生了什么变化的主要方式是通过比较组件上的类型。如果类型发生了变化，它就被认为是不同的，因此旧的组件会被卸载，新的组件会被重新装载。每次App渲染时，它创建了全新类型的组件，这意味着从一个渲染到下一个渲染不能保存任何内容。
我建议只使用React.Memo来实现Item1、Item2、Item3。

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

但是如果你绝对需要动态地做它，那么你需要确保你只做一次，这基本上意味着你需要记住记忆：

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

编辑：这个答案是不推荐的。它完全破坏了React备忘录的要点。检查接受的答案，因为它解释了正确的方式。
我认为这是可行的，我更愿意使用array的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>
    );
}