javascript - 对象解构赋值在构造函数中表现异常

Question

我正在使用 electron 和 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

Am I missing something really obvious?

大概一个新数组被分配给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 在您访问 时为您提供值。