setState（API）的异步和同步问题
在react中，想要改变state内部状态，需要使用setState进行修改，如果只是修改state的部分属性，则不会影响其他的属性，这个只是合并并不是覆盖。
this.setState()，该方法接收两种参数：对象或函数（理解对象形式是函数形式的简写）。
- 对象：this.setState({key:value})。
- 函数：接收两个函数，第一个函数接受两个参数，第一个是当前state，第二个是当前props，该函数返回一个对象，和直接传递对象参数是一样的，就是要修改的state；第二个函数参数是state改变后触发的回调
在此还需要注意的是，setState有异步更新和同步更新两种形式，那么什么时候会同步更新，什么时候会异步更新呢？
React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件，setTimeout/setInterval等。
大部分开发中用到的都是React封装的事件，比如onChange、onClick、onTouchMove等，这些事件处理程序中的setState都是异步处理的。
总结：setState同步异步和调用环境，上下文有关。
import React,{Component,createRef} from "react";
class SetStateAsync extends Component {
state = {
num:0
}
btnRef = createRef();
//更新状态的两种方式：
//1、对象形式
addNum = (params)=>{
console.log(params);
this.setState({
num:this.state.num+1
})
}
//2、函数形式
// addNum = (params)=>{
// console.log(params);
// this.setState((state,props)=>{
// console.log(state,props,"什么参数！！！");
// return {
// num:this.state.num + 1
// }
// },()=>{
// //获取异步的最新修改state的值。
// console.log(this.state.num);
// })
// }
//问题：setState(API)同步异步问题！！！
/*
通过react控制的调用是异步的。
react控制：即react二次封装的事件。
通过原生调用setState是同步的。
同步如下：
*/
componentDidMount(){
this.btnRef.current.addEventListener("click",()=>{
console.log("原生方法执行了！！！！");
this.setState({
num:this.state.num+1
});
console.log(this.state.num,"同步的setState更新状态!!!");
})
}
render(){
return (
<>
同步异步更新state状态
数量：{this.state.num}
)
}
}
export default SetStateAsync;
补充：
React怎么调用同步或者异步的呢？
在 React 的 setState 函数实现中，会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列中延时更新，而 isBatchingUpdates 默认是 false，表示 setState 会同步更新 this.state；但是，有一个函数 batchedUpdates，该函数会把 isBatchingUpdates 修改为 true，而当 React 在调用事件处理函数之前就会先调用这个 batchedUpdates将isBatchingUpdates修改为true，这样由 React 控制的事件处理过程 setState 不会同步更新 this.state。
如果是同步更新，每一个setState都会调用一次render。
如果是异步更新，多次调用setState会以最后调用的为准，前面的将会作废。（也就是合并多个setState优化）
原文：https://www.cnblogs.com/swt-axios/p/14944159.html