react 中的 setState

语法：setState(newState [,callback])

1、只要有入门基础的同学都知道 setState({...}) 是更新组件中的 state 内容

2、但是，setState 是异步的，倘若我们设置完就使用新的 state 就可能得不到我们想要的结果，例如：

this.state = {init:1}
this.setState({init:2})
console.log(this.state.init); // 输出结果为：1
//----------但是，我们明明是想要结果为 2------so~~~回调函数就解决了这个问题~~~-------
this.setState({init:2}, ()=>{
    console.log(this.state.init); // 输出结果为：2
})

⚠️从上面的代码段可以看出，setState 中的回调函数作用大致与 componnetDidUpdate生命周期函数相似

setState 方法将组件的更改排入队列，并且告诉 React 使用更改后的状态更新组件；而 React 会在必要的时候一起更新几个组件，而不是每次都立即进行更新。所以，我们需要将 setState 视为请求，而不是一个立即执行函数。在官方文档中，建议使用 componentDidUpdate 代替回调函数这种逻辑。

3、setState 内在隐患，由于 setState 是异步的，并且有可能是同一周期同一批次进行处理，就会出现以下问题：

　后一个更改替代了前一个更改，原本为们是想要 quantity + 2，由于异步批次处理，导致 quantity 最终只加 1

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

　倘若下一个状态取决于先前的状态，，不建议写作形式如下：

//wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

　　而是：

//correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));