React State(状态)

一、React State(状态)

React把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，如何渲染UI，让用户界面和数据保持一致。

React里，只需更新组件的state，然后根据新的state重新渲染用户界面（不要操作DOM）。

添加一个类构造函数来初始化状态this.state，类组件应始终使用props调用基础构造函数。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: "恭喜发财，财源滚滚"};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>内容输出： {this.state.date}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);

二、将生命周期方法添加到类中

挂载：每当Clock组件第一次加载到DOM中的时候，我们想生成定时器。

卸载：每当Clock生成的这个DOM被移除的时候，我们想清除定时器。

<script type="text/babel">
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);
</script>