React 入门学习笔记整理（五）—— state

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);
    }

执行结果如下：