时间戳

首页 > 解决方案 > 为什么 setState([...arr]) 会导致重新渲染而 setState(arr) 不会？

reactjs - 为什么 setState([...arr]) 会导致重新渲染而 setState(arr) 不会？

问题描述

这些不应该做同样的事情吗？第一个代码片段导致我的组件重新呈现

const context = React.useContext(myContext);
const { arr, setArr } = context;

const addItem = (item) => {
    arr[0].subArr.push(item);
    setArr([...arr]);
}

但这并不

const context = React.useContext(myContext);
const { arr, setArr } = context;

const addItem = (item) => {
    arr[0].subArr.push(item);
    setArr(arr);
}

setArr 只是从 React.useState() 中提取的，我没有构建任何自定义功能

标签： reactjsreact-hooksreact-context

解决方案

React 只会在其状态（或上下文）中至少有项目发生变化时重新渲染组件。如果所有之前的状态值都===为新状态，React 将根本不会调用功能组件，而只是继续使用上次渲染的内容。

这是你永远不应该在 React 中改变状态的原因之一——它可能导致意外或不可预测的行为。

在您的情况下，当您这样做时setArr(arr)，由于 与arr当前处于状态上下文中的数组完全相同，因此 React 会跳过重新渲染，因为新状态是===旧状态。只有通过创建一个与当前状态不同的新数组，才会===发生重新渲染。

推荐阅读