Question

问题

每次我调度一个动作（例如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?

Answer 1

保持/使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;
...

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

1 个答案: