为什么散布算子会直接影响状态而有时却不影响状态？ （反应）

Question

我是ReactJS的新手，但是有些东西让我感到困惑，例如为什么当我使用传播运算符复制简单对象并修改其内容时，处于该状态的对象不会受到影响。但是，如果我使用相同的方法创建数组的副本并更改其内容，则状态中的对象现在将被修改，以反映对该副本所做的操作。

class App extends Component {
  state = {
    value: { id: 5, count: 0 },
  };

  sampleFunction = () => {
    let sampleValue = { ...this.state.value };
    sampleValue.count--;
    console.log(this.state.value.count);
    console.log(sampleValue.count);
  };

  componentDidMount() {
    // Ajax Call
    console.log("App - Mounted");
    this.sampleFunction();
  }
}

结果：
0
-1

class App extends Component {
  state = {
    value: [{ id: 5, count: 0 }],
  };

  sampleFunction = () => {
    let sampleValue = [...this.state.value];
    sampleValue[0].count--;
    console.log(this.state.value[0].count);
    console.log(sampleValue.[0]count);
  };

  componentDidMount() {
    // Ajax Call
    console.log("App - Mounted");
    this.sampleFunction();
  }
}

结果：
-1
-1

这背后的概念是什么？

Answer 1

在前一种情况下，传播语法会创建this.state.value对象的浅表副本。 sampleValue是一个独立的对象，具有自己的count值。

// new object with independent count property
let sampleValue = { ...this.state.value };

在后一种情况下，spread语法会创建一个新数组，但该数组的条目指向原始对象中的相同对象。对这些对象的修改会在两个地方反映出来，因为它们是相同的对象。

// new array, but contains the original objects
// sampleValue[0] and this.state.value[0] are literally the same object
let sampleValue = [...this.state.value];

您可以在以下示例中具体看到此内容：

const someObject = { bananas: 1, wookies: 3};

// two arrays containing the same object
const firstArr = [someObject];
const secondArr = [someObject];

firstArr[0].bananas = 4; // modifies the shared object
console.log(secondArr[0].bananas); // 4

someObject.wookies = 42; // modifies the shared object
console.log(firstArr[0].wookies); // 42
console.log(secondArr[0].wookies); // 42