React 组件状态的使用

类组件的数据来源有两个地方 父组件传过来的属性，自己内部的状态
属性和状态发生变化后组件都会更新，视图都会渲染

** 1 定义状态的第一种方式 在构造函数中**

import React from 'react';
import ReactDOM from 'react-dom';
class Clock extends React.Component{
  constructor(props){
    super(props);
    this.state = {date:new Date()};//唯一可以给状态直接赋值的地方就是构造函数
  }
  //组件挂载完成
  componentDidMount(){
    this.timer = setInterval(this.tick,1000);
  }
  //组件将要卸载
  componentWillUnmount(){
    clearInterval(this.timer)
  }
  //类的属性 这样写法函数里的this永远指向组件的实例
  tick = ()=>{
    //Do not mutate state directly. Use setState().
    //this.state = {date:new Date()};
    //this.state.date = new Date();
    //setState可以修改状态，另外可以让组件刷新
    this.setState({date:new Date()});
    //this.state.date = new Date();
    //this.setState({});
  }
  render(){
    return (
      <div>
        <h1>Hello World</h1>
        <h2>现在时间是:{this.state.date.toLocaleTimeString()}</h2>
      </div>
    )
  }
}

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

2 定义状态的第二种方式 事件处理函数中

state的更新可能是异步的 出于性能考虑react可能会把多个setstate合并成同一个调用
如何判断它是同步的还是异步的，是不是批量处理 一个原则就是React能管控的地方，批量的，异步的（事件处理函数，生命周期函数）。不能管控的地方就是同步的 非批量（setInterval setTimeout）

在事件处理函数中，setState的调用会批量执行
在事件处理函数，setState并不不会修改this.state,等事件处理函数结束后再进行更新
在其他react 不能管控的地方，就是同步执行的（如定时器内）