React State

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

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
　　　　date: new Date()
　　 };
　　 //在state中，定义一条数据 data ，让它为 new Date().该数据不停变化

  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在时间： {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

这个时候，当该组件渲染到页面上后，我们看到这个时候它自己是不会变化的。

这是因为 React 在渲染到 页面上时候，类似单帧页面，只会渲染一次。虽然他的数据在变化，但是我们没有设置让他更新页面数据的操作。所有我们可以通过给this.setState()方法设置一个定时器来更新页面。

componentDidMount() {//React的生命周期方法：页面加载完毕后
    this.timerID = setInterval(
      () => this.tick(),//调用tick函数来修改数据
      1000
    );
  }
componentWillUnmount() {//React的生命周期方法：页面将要销毁时

  　 clearInterval(this.timerID); 
} 
tick() { 
　　this.setState({ date: new Date() }); //调用this.setState()方法修改数据
}

 总结：

　　初始化：this.state = { user : "Premy" };

　　初始化可以防止在构造函数  construstor  里；

　　修改state : this.setState({ user : "Abc " });

　　state  的作用域只属于当前类，不污染其它块。