javascript - 防止重新渲染数组映射的组件

问题

每次我调度一个动作（例如TOGGLE_TODO）时，即使仅更改了一个状态值，该数组也会重新渲染

码

列表渲染

{
    arr.length > 0 ?
        arr.map(({ id, text } = {}) => {
            return (
                <TaskElement key={id}
                    text={text}
                    toggleTask={() => toggleTask(id)}
                    removeTask={() => removeTask(id)} />
            )
        }) :
        // ...
}

减速器

...
case 'TOGGLE_TASK':
        return state.map(task => (
            task.id === action.id ? {
                ...task,
                checked: !task.checked
            } : task
        ))
...

当我切换任务时，更新之间会有明显的延迟。我试图通过将TaskElement设置为PureComponent来解决此问题，甚至使用浅浅的相等性编写了自己的shouldComponentUpdate，但它仍会重新渲染。

我知道映射一个数组会在内存中创建一个全新的数组，这会使导致重新渲染的关键道具无效。有没有什么办法解决这一问题。

提前致谢。

编辑
类似问题：Shouldn't Redux prevent re-rendering?

最佳答案

保持/使TaskElement作为PureComponent。

在Reducer内部，仅更新需要更改的数组项。

减速器

...
case 'TOGGLE_TASK':
        let stateCopy = [...state];
        const toggledItemIndex = state.findIndex((task) => task.id === action.id);

        stateCopy[toggledItemIndex] = {
        ...stateCopy[toggledItemIndex],
        checked: !stateCopy[toggledItemIndex].checked,
        };

        return stateCopy;
...