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

问题描述

是否可以通过for循环将React.memo应用于组件数组？
说我有以下三个组成部分：

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）