如果我没有更改状态的引用，为什么react调用render起作用？[副本]

Question

那么为什么react调用在此场景中呈现：

class MyComponent extends React.Component {
 constructor(props) {
  this.state = {
   user: { name: 'john' },
  };
 }

 render() {
  return (
   <div>
    Name: {this.state.user.name}
    <button onClick={() => {

     const user = this.state.user;
     user.name = 'Michael';

     // this works, also this.setState({}) with empty json works too
     this.setState({ user });  
    }}> Change name </button> 
   </div>);
 }

const user = {...this.state.user}; // a new copy of object, so new refference

有什么想法吗？

Answer 1

使用空对象设置状态是有效的，因为react对状态突变本身不做任何操作。相反，它只是使用state对象并创建更新的虚拟DOM，同时调用render方法，这也反映了状态的变化。

但是，进行状态突变的问题是，生命周期方法现在将无法清楚区分prevstate和this.state之间的差异，并且由于prevstate和this.state值都引用了同一个引用，所以大量比较将失败。