標簽：事件 xtend def 行修改 傳遞 class render 開發 tst
在react中，想要改變state內部狀態，需要使用setState進行修改，如果只是修改state的部分屬性，則不會影響其他的屬性，這個只是合並並不是覆蓋。
this.setState()，該方法接收兩種參數：對象或函數（理解對象形式是函數形式的簡寫）。
在此還需要注意的是，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 (
<>
<p>同步异步更新state状态</p>
<p>数量：{this.state.num}</p>
<button ref={this.btnRef} onClick={()=>this.addNum("改变num数量！！！")} className=‘btn‘>点我+1</button>
</>
)
}
}
export default SetStateAsync;
標簽：事件 xtend def 行修改 傳遞 class render 開發 tst
原文地址：https://www.cnblogs.com/swt-axios/p/14944159.html
