如果我没有更改状态的引用，为什么反应调用渲染函数？ [重复]

Question

这个问题在这里已有答案：

• ReactJS - Does render get called any time “setState” is called? 4个答案

那么为什么在这种情况下反应调用会呈现：

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对状态变异本身没有任何作用。相反，它只是使用状态对象并在调用render方法时创建更新的Virtual DOM，这也反映了状态突变。

然而，进行状态变异的问题在于，生命周期方法现在无法清楚地区分prevState和this.state，并且由于prevState和this.state值都将指代相同的参考，因此许多比较将失败。