javascript - 如何将 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>
  );
}