扯扯React的setState

先看一个例子

constructor(props) {
    super(props);

    this.state = {
      click:0
    };
}

render() {
    console.log('render');
    return (
        <div>
          <p onClick={this.handleClick.bind(this)}>click:{this.state.click}</p>
        </div>
    )
}

handleClick() {
    this.setState({
      click:this.state.click + 1
    });
    this.setState({
      click:this.state.click + 1
    }); 
}

最后显示不是2，而是1

image.png

Why?

state机制

当setState后，state并不是立即变化，而是进行batchUpdate，而且还进行了合并

所以要做如下修改

handleClick() {
    this.setState((prevState,props)=>({
      click:prevState.click + 1
    }));
    this.setState((prevState,props)=>({
      click:prevState.click + 1
    }));
}

setState设置callbak回调函数

回调函数会在state更新后进入

handleClick() {
    this.setState({
      click:2
    }, ()=>{console.log('finish')});
}