Question

我尝试从ReactJS中了解例子：

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，则您的反应组件将不会注意到这些更改，因为在初始安装后，只有{{1}才重新呈现React组件调用（更新setState对象），重新呈现父组件或调用this.state。因此，如果您希望在更改某些属性时重新呈现组件，则应将其存储在状态对象中并使用forceUpdate进行更新。回到您的示例：如果您使用setState更新setDate，您的组件将不会注意到此操作，并仍会显示旧值。如果您使用此：

this.date

它将更新this.setState({date: '2016'})，React会知道此更改，并会重新呈现您的组件以显示当前日期值。

Answer 2

this.state允许您在组件生命周期中维护组件的状态。如果你使用this.state并且在组件生命周期中从未改变过，那么它就没有任何意义。

声明你必须使用的状态：

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

更新您必须使用的状态：

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

更新这样的状态是不好的做法。 this.state.key = somevalue。

每当您设置组件的任何状态时，将再次调用render方法以使用更新的值重新呈现组件。

因此，对于您的问题，如果您的日期在组件生命周期的任何阶段都不会更改，那么您可以使用this.date而不是this.state.date。如果它正在改变并且您想使用更新的值，那么您可以使用this.state。

Answer 3

初始化你需要做的状态变量

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

如果你想更改/为状态变量赋值，那么你必须这样做

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

ReactJS this.state

3 个答案: