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

Question

这个问题已经有答案了:

ReactJS - Does render get called any time "setState" is called? (10 个回答)

已关闭 4 年前。

那么为什么在这种情况下会出现 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，这也反射(reflect)了状态突变。

但是，进行状态突变的问题是，生命周期方法现在无法清楚地区分 prevState 和 this.state 以及大量比较将会失败，因为 prevState 和 this.state 值都将引用相同的引用。