React是否在内部创建prevState的深层副本或浅层副本？

Question

我只是从编程开始，最近就在React中编写了我的第一个应用程序，虽然它确实可以工作，但是我不确定我是否正确处理了内部状态。我的问题是setState方法是否创建“ prevState”的不变深层副本？举一个例子：

 menuAddRecHandler = () => {
    this.setState((prevState) => {
      const updatedState = {...prevState};
      const dayInd = updatedState.menu.recipes.findIndex(item => item.dayNum === updatedState.menuInternal.currentDay);
      updatedState.menu.recipes[dayInd].recList.push({
        name: prevState.menuInternal.menuRecSelect,
        portions: prevState.menuInternal.menuNumPortInput
      });
      return updatedState;
    })
  }

在我的处理程序中，我将一个对象推送到updateState对象的嵌套数组，该数组由spread操作符从prevState复制过来。现在，我知道散布运算符仅生成一个浅表副本，但是setState方法在内部提供的prevState也是浅表，这是否意味着我实际上是在通过调用此处理程序直接更改状态？如果是这样，我该如何解决此问题？谢谢。

Answer 1

According to the docs根本不是副本

状态是在应用更改时对组件状态的引用。它不应该直接变异。

制作深层副本通常不利于性能，但是如果必须这样做，则可以执行以下操作：

const updatedState = JSON.parse(JSON.stringify(prevState));

Answer 2

您的示例中有很多“噪音”，因此我将其简单化：

state = {  name: `Dennis`, age: 89 }

this.setState((prevState) => {
  return { age: prevState.age + 1 }; 
}); // { name: `Dennis`, age: 90 }

this.setState({ name: `John` }); // { name: `John`, age: 89 }

在类组件中，this.setState 浅合并与先前的状态，prevState是实际的状态引用，即：{ name: "Dennis", age: 89 }，其中

请注意，功能组件并非如此（常见错误）。>>