這個 object 在 Class React 中的組件？

Question

this對 class 組件中的 object 有疑問。

import React from "react";

class App extends React.Component {
    constructor(props) {
    super(props)
    this.state = {
      count: 0,
      age: 30,
      names: {
        fn: 'Naruto',
        ln: 'Uzumaki'
      }
    };
    this.ref = this.state;
    console.log('constructor');
  }

    update = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render() {
    console.log(Object.is(this.state, this.ref), this.state, this.ref);
    console.log(this.state.names === this.ref.names);
        return <div className="App">
      {this.state.count}
      <button onClick={this.update}>click</button>
      </div>;
    }
}

export default App;

初始渲染后的o/p：

constructor 
true
{count: 0, age: 30, names: Object}
{count: 0, age: 30, names: Object}
true

o/p 在后續渲染之后：

false
{count: 1, age: 30, names: Object}
{count: 0, age: 30, names: Object}
true

false
{count: 2, age: 30, names: Object}
{count: 0, age: 30, names: Object}
true

false
{count: 3, age: 30, names: Object}
{count: 0, age: 30, names: Object}
true

為什么this.ref指向this.state變量在初始渲染之后的每個render中都不同？ 如果Objects被setState調用合並，那么this.state和this.ref在每次渲染后必須指向同一個 object，對吧？ 有人可以啟發我嗎？

Answer 1

如您所見， Object.is(this.state, this.ref)在第一次更改后返回 false。

這是因為一旦調用了“setState”，該類的 state 就會設置為新保存的“狀態”object。 這就是為什么你不能用this.state.x = val.

如果您在每次設置后設置 this.ref=this.state，這兩個對象將保持不變。

假設object.state的分配將始終復制該類的 state在那個確切時刻的內容