对象解构赋值在构造函数中行为异常

Question

我正在使用电子和React，我有一些代码看起来像这样：

constructor(props) {
  super(props);
  const { arr } = this.props;
  ipcRenderer.on('event', () => {
    console.log(this.props.arr); // will log updated values
    console.log(arr); // always logs initial value 
  });
}

有谁知道为什么会发生这种情况？我无法在其他任何地方重现这一点。我尝试过使用窗口事件处理程序和闭包做类似的事情，以查看它们的行为方式是否相同，但它们没有。我错过了一些非常明显的东西吗？

const obj = { arr: [1, 2, 3] };
const { arr } = obj;
obj.arr.push(4);
arr.push(5);
console.log(obj.arr); // => [1, 2, 3, 4, 5]
console.log(arr); // => [1, 2, 3, 4, 5]

Answer 1

我错过了一些非常明显的东西吗？

大概为this.props.arr分配了一个新数组。简单重现：

const obj = { arr: [1, 2, 3] };
const { arr } = obj;
obj.arr = [1];
console.log(obj.arr); // => [1]
console.log(arr); // => [1, 2, 3]

解构并不神奇。这两者是等效的：

const { arr } = this.props;
const arr = this.props.arr;

arr保存this.props.arr在分配时具有的值，而this.props.arr在访问它时为您提供值。