React状态更新前为何要克隆数组内的对象？

问题代码 #

const [movies, setMovies] = useState(getMovies());

function handleLike(movie) {
    const movieClone = [...movies];
    const index = movieClone.indexOf(movie);
    movieClone[index] = { ...movieClone[index] };
    movieClone[index].like = !movieClone[index].like;
    setMovies(movieClone);
}

问题描述 #

我是React新手，在学习线上教程时发现讲师会克隆movies数组内的对象（即代码中的movieClone[index] = { ...movieClone[index] };），但我去掉这一步后代码仍能正常运行，想了解这么做的原因。

解答 #

这步操作是React状态更新的标准规范，核心是遵守状态不可变原则，具体原因如下：

• 你现在去掉这步能正常运行，属于“巧合”：React的渲染机制在某些场景下（比如组件因其他状态更新触发渲染）会“兜底”刷新，但这是不符合规范的写法，会埋下隐患。
• 仅克隆数组（const movieClone = [...movies];）时，数组本身是新的引用，但数组内的movie对象还是原状态的旧引用。直接修改movieClone[index].like本质是在修改原状态里的对象，违反了React“状态不可直接修改”的要求——React依赖状态引用的变化来判断是否需要重新渲染组件。
• 克隆数组内的对象（{ ...movieClone[index] }）会创建一个全新的对象引用，修改新对象的like属性后，整个数组的引用是新的，目标对象的引用也是新的。这样React能准确检测到状态变化，确保组件可靠地重新渲染，保证UI和状态完全同步。
• 如果跳过这步，可能会遇到组件不更新的诡异bug：比如当组件仅依赖该movie对象的属性渲染时，因为对象引用未变，React会判定状态无变化，跳过渲染，导致UI与实际状态不一致。

简单来说，这步操作是为了让状态更新更可预测，避免潜在的渲染问题，是React开发的基础要求。

内容的提问来源于stack exchange，提问作者Dalare