1、state

1）组件本省也是有状态的，定义在组件内部的state中，state的状态只能由组件自身改变，任何其他组件都不能改变。

当需要改变state时，通过调用setState方法来改变，setState会导致组件重新渲染。

class GreateH extends React.Component{

    constructor(props){

        super(props);

        this.state ={

            name:'CoCo'

        }

    }

    handler(params){

        this.setState({

            name:params

        })

    };

    render(){

        return <div>

            <h2 onClick={this.handler.bind(this,'kristy')}>hello,{this.state.name}</h2>

        </div>

    }

}

2）状态更新可能是异步的

import React,{Component} from "react";

class Test extends Component{

    constructor(props){

        super(props);

        this.state = {

            num:1

        }

    }

    add = () => {

        this.setState({

            num:this.state.num+1

        })

        console.log(this.state.num);

    }

    render(){

        return (

            <div>

                <p>{this.state.num}</p>

                <button onClick={this.add}>点击累加</button>

            </div>

        )

    }

}

export default Test;

我点击时，可以看到页面上的this.state.num数值变了，由1变成2，但是打印出来的this.state.num还是1,可以得出在事件中是异步的。

下面再举例说明：

  add = () => {

        this.setState({

            num:this.state.num+1

        });

        this.setState({

            num:this.state.num+2

        });

     console.log(this.state.num);

    }

页面更新后的值是3，控制台打印出来的结构是1，因为是异步的，所以无法通过上一个状态去计算下一个状态。而更新的结果是3不是4，这是因为setState中会合并操作。如果想要避免这种情况，就需要在setState传入一个函数，如下所示：

  add = () => {

        this.setState((state)=>{

            return {

                num:state.num +1

            }

        });

        this.setState((state)=>{

            return {

                num:state.num +2

            }

        });

     console.log(this.state.num);

    }

这个时候,更新后页面显示的是4不是3，但是依然是异步的。

3）setState（updater，calback）

因为setState更新是异步的，如上代码所示，最后页面显示的是4，但是控制台打印出来的结构是1，无法取得更新后的值，如果要取得更新后的值，需要在setState的参数中，再加一个回调函数，回调函数会在DOM更新后执行，所以可以在回调函数中取到更新后的值

add = () => {

        this.setState((state)=>{

            return {

                num:state.num +1

            }

        });

        this.setState((state)=>{

            return {

                num:state.num +2

            }

        },()=>{

            console.log("更新后的值："+this.state.num);

        });

        console.log(this.state.num);

    }

执行结果如下：