setState第二个参数的作用

在React中，我们使用setState来更新状态。

例如：

// 初始化状态
this.state = {
  count: 0
}

// 更新状态
this.setState({
  count: this.state.count + 1
})

// 然后，count 的值就变成了 1

其实，setState是有「第二个参数」的。

不过第二个参数是一个「可选参数」，传入一个回调函数可以获取到最新的state。

这个回调函数什么时候被调用？

当 setState() 完成并且组件已经重新渲染时，该回调函数将被调用。

我们通过一个例子来示范吧：

我们在组件的状态中设置一个count属性，在setState()方法的第一个参数修改count属性，并第二个参数中使用回调函数来打印最新的count值。

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick() {
    this.setState({
      count: this.state.count + 1
    }, () => {
      console.log('count: ', this.state.count);
    });
  }
  
  render() {
    return (
      <div>
        <p>count: {this.state.count}</p>
        <button onClick={() => this.handleClick()}>Increment</button>
      </div>
    );
  }
}

我们每次点击按钮时，handleClick()方法就会将count属性的值加1，加1之后组件重新渲染。

这个setState()第二个参数(回调函数)的作用是，在组件重新渲染后立即获取到更新后的状态并做一些操作（比如打印）。