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

Question

问题

每次我分派(dispatch)一个操作(例如 TOGGLE_TODO)时，即使只有一个状态值发生更改，数组也会重新渲染

代码

列表渲染

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

reducer

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

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

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

提前致谢。

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

Answer 1

将 TaskElement 保留/设为 PureComponent。

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

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;
...