如何将 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 的意义。检查已接受的答案，因为它解释了正确的方法。

我认为这行得通。我宁愿使用数组的 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>
    );
}

Answer 2

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

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

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

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.memo 应用于数组中的所有组件？

How do I apply React.memo to all components in an array?

javascript

memo

reactjs