ReactJS this.state

Question

我試圖瞭解從ReactJS exmple：

class App extends Component { 

    constructor(props) { 
    super(props); 

    this.state = {date: new Date()}; 
    this.date = new Date(); // why not just this.date 
    } 

    render() { 

    return (
     <div> 
     <h1>App Hello, {this.state.date.toLocaleTimeString()}.</h1> 
     <h2>{ this.date.toLocaleTimeString() }</h2> //same result 
     </div> 
    ); 

    } 
} 

我爲什麼要使用this.state.date，而不是僅僅this.date？ 爲了更新this.date，我也可以使用setter，比如setDate（）。

Answer 1

如果在組件生命週期中某個屬性不會被更改，那麼通常您是對的 - 結果將是相同的。但是，如果您要更改此屬性，那麼如果您決定使用this.someProperty，則反應組件不會意識到這些更改，因爲只有在調用setState（更新this.state對象）時才重新渲染初始安裝後的React組件，父組件被重新渲染或調用forceUpdate。因此，如果您希望在更改某些屬性時重新呈現組件，則應將其存儲在狀態對象中，並使用setState進行更新。回到您的示例：如果您使用setDate更新this.date，您的組件將不會意識到此操作，並且仍會顯示舊值。如果您使用此：

this.setState({date: '2016'}) 

它將更新this.state.date並作出反應會意識到這種變化，並會重新渲染您的組件，以顯示當前的日期值。

Answer 2

this.state允許您在組件生命週期中維護組件的狀態。如果您使用this.state並且在組件生命週期中從未更改過，它就沒有任何意義。

申報狀態，你必須使用：

this.state = { 
    'key': 'initial value' 
} 

更新，你必須使用狀態：

this.setState({ 
    'key': 'your updated value' 
}); 

這是不好的做法，這樣的更新狀態。 this.state.key = somevalue。

每當您設置組件的任何狀態時，渲染方法將再次被調用以重新渲染具有更新值的組件。

因此，如果你的日期在組件生命週期的任何階段都不會改變，那麼你可以使用this.date而不是this.state.date。 如果它正在改變，你想使用更新的值，那麼你可以使用this.state。

Answer 3

初始化狀態變量，你只需要做

this.state = { `state variable name` : `initial value` } 

如果你想改變/分配新值狀態變量，然後 你要做的

this.setState({`state variable name` : `new value`})