state状态

一、注意事项

1、用setState更新状态而不能直接修改

this.state.counter += 1; //错误的

2、setState是批量执行的,因此对同一个状态执行多次,只起⼀次作用,多个状态更新可以放在同一个setState中进行

componentDidMount() {
    // 假如couter初始值为0,执行三次以后其结果是多少?=>0
    this.setState({counter: this.state.counter +1});
    this.setState({counter: this.state.counter +1});
    this.setState({counter: this.state.counter +1});
}

3、setState通常是异步的

二、三种同步更新操作

如果要同步获取到最新状态值有以下三种方式:
1、传递函数给setState方法

this.setState((nextState, props) => ({
    counter: nextState.counter + 1
})); // 1
this.setState((nextState, props) => ({
    counter: nextState.counter + 1
})); // 2
this.setState((nextState, props) => ({
    counter: nextState.counter + 1
})); // 3

2、使用定时器,setTimeout或setInterval

setTimeout(() => {
    this.setState({
        counter: this.state.counter + 2
    });
    console.log(this.state.counter); //2
}, 0);

3、原生事件中修改状态

componentDidMount() {
    document.getElementsByTagName("button")[0].addEventListener(
        "click",
        () => {
            this.setState({
                counter: this.state.counter + 2
            });
            console.log(this.state.counter);  //2
        },
        false
    );
}

总结:setState只有在合成事件和钩子函数中是异步的,在原生事件和setTimeout、setInterval中都是同步的。