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