当 setState 与类的对象实例发生反应时会发生什么

Question

我有这个小提琴

let m = new Mine();
this.setState(m, () => {
    console.log('1:', m instanceof Mine, m.x, m.meth);
    // => 1: true 123 function meth() {}
    console.log('2:', this.state instanceof Mine, this.state.x, this.state.meth);
    // => 2: false 123 undefined
});

如您所见，我创建了 Mine 类的实例，然后使用该实例在反应组件中设置状态。

我希望 this.state 完全包含该实例，但是虽然在构造函数中设置的实例属性可用，但我无法访问该实例上的任何类方法。

小提琴中的测试表明 this.state 不是 Mine 类的实例。

有没有人了解发生了什么或者这是意外行为？

Answer 1

经过更多的调查，我找到了发生这种情况的原因。

react 的 _processPendingState 函数使用 Object.assign 来设置新状态，因此由于目标对象是一个新对象（与传递给 setState 的对象不同），新状态失去了作为“Mine”类实例的质量。

而且因为 Object.assign 只将自己的可枚举属性从源复制到目标，所以新状态也不会有类方法。

如果在小提琴中我们替换了这条线......

let m = new Mine();

和...

let m = {x: 123};
Object.defineProperty(m, 'meth', {
    enumerable: false,
    get() { return function() {}; }
});

我们仍然没有结果状态的“meth”属性。即使“m”拥有“meth”属性，它也是不可枚举的。