React 出现Cannot add property zIndex, object is not extensible

Question

为什么在render中使用变量，会却出现了对象不可扩展。

首先，定义变量。（以下步骤全在class内部执行）

boxOpenStyle={};

然后，在方法open中去增加一个属性。

open(){
    this.boxOpenStyle.zIndex=9;
    this.setState({visible:true});
}

在方法close中对该变量重新赋值。

close(){
    this.boxOpenStyle.zIndex=8;
    this.setState({visible:false});
}

最后，render中使用该变量。

render(){
    return (
        <div style={this.state.visible ? this.boxOpenStyle:{}}></div>
    );
}

最后出现结果是：

   1.当执行open方法时，程序正常运行。
   2.当close方法被执行时，程序出错，告知对象只读，不可重新赋值。

如下图：

就算将boxOpenStyle放在state里面去改变，仍然会出现这样的错误。
但是如果将style变成id或className：

<div id={this.state.visible ? this.boxOpenStyle:{}}></div>
或
<div className={this.state.visible ? this.boxOpenStyle:{}}></div>

就不会出现这样的错误。
所以，请问这是react的什么机制触发了只读和不可扩展属性？

Answer 1

为了避免一些错误，react内部冻结了元素的很多内容，意思就是让你尽量使用setState来更改数据。

执行open方法时，boxOpenStyle还没冻结，close的时候元素创建完成，对象已经被冻结，再更改属性抛出错误