如果我没有更改状态的引用，为什么 React 会调用渲染函数？

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>);
 }

我所期望的是 React 不会检测到任何更改，并且为了使上述代码能够复制用户对象，以便 React 检测到更改，如下所示：

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

有任何想法吗？

Answer 1

使用空对象设置状态是有效的，因为 React 不会对状态突变本身执行任何操作。相反，它只是使用状态对象并在调用渲染方法时创建更新的虚拟 DOM，这也反映了状态突变。

然而，进行状态突变的问题是，生命周期方法现在无法清楚地区分prevState和this.state，并且许多比较将失败，因为prevState和this.state值都引用相同的引用。