react状态

 state注意事项：

• 不能直接this.state = xx修改，必须用this.setState({xx : xx})
• 因为setState做了两件事：1.修改状态 2.重新render

this.setState原理：

this.setState({number:this.state.number+1})

//等价于：

Object.assign(this.state,{number:this.state.number+1})

在组件里解决this指针的三种方法：

• 使用bind this.fn.bind(this) 把fn方法里面的this指针绑定为组件实例
• 使用匿名函数  <button onClick={()=>{this.xx();}}
• 使用类的属性（给类的实例增加一个属性，而这个属性里的this绑定为组件的实例）

import React from 'react';
import ReactDOM from 'react-dom';
class clock extends React.Component{
    constructor(props){
        super(props);
        //在构造函数里，唯一可以给this.state赋初始值的地方
        this.state = {date:new Date().toLocaleTimeString()}
    }
    add(){
        console.log('add',this)
    }
    min=()=>{
        console.log('min',this)
    }
    //组件挂载完成后调用
    componentDidMount(){
        this.$timer = setInterval(()=>{
            this.setState({
                date:new Date().toLocaleTimeString()
            },1000)
        })
    }
    render(){
        return <div>时间：{this.state.date}
            <button onClick={()=>{this.add()}}>匿名函数改变this</button>
            <button onClick={this.min}>类的属性改变this</button>
        </div>
    }
}