为什么此React代码不会使状态发生变化，而香草代码却会发生变化？

Question

沙盒示例：

https://codesandbox.io/s/207ml94zj0

令人反感的代码：

  handleChange(e) {
    console.log(e.target.value);
    console.log("state before", this.state);
    let a = this.state.tranches.slice(); //Clone the state
    a[0].start = e.target.value;
    a[0].end = 5;
    console.log("state after", this.state);
    this.setState({ tranches: a });
  }

如果我只是将其复制为一些纯Javascript：

const state = {
  tranches: [{
    start: "foo",
    end: 1
  }]
}

const value = "bar";

console.log("state before", state);
let a = state.tranches.slice(); //Clone the state
a[0].start = value;
a[0].end = 5;
console.log("state after", state);

我们可以看到state的值在state before和state after之间发生了突变。

但在沙盒示例中-并非如此。

实际上，发生的是React示例中打印到控制台的内容，是代码运行后 的状态值。

为什么会这样？