react中setState方法到底是異步還是同步，其實這個是分在什麼條件下是異步或是同步。
1.先來回顧react元件中改變state的幾種方式：
import React, { Component } from 'react'class Index extends Component { state={ count:1 } test1 = () => { // 通过回调函数的形式 this.setState((state,props)=>({ count:state.count+1 })); console.log('test1 setState()之后',this.state.count); } test2 = () => { // 通过对象的方式(注意：此方法多次设置会合并且只调用一次！) this.setState({ count:this.state.count+1 }); console.log('test2 setState()之后',this.state.count); } test3 = () => { // 不能直接修改state的值，此方法强烈不建议！！！因为不会触发重新render this.state.count += 1; } test4 = () => { // 在第二个callback拿到更新后的state this.setState({ count:this.state.count+1 },()=>{// 在状态更新且页面更新(render)后执行 console.log('test4 setState()之后',this.state.count); }); } render() { console.log('render'); return (
currentState:{this.state.count}
) } } export default Index;
#2.setState ()更新狀態是非同步還是同步：
需要判斷執行setState的位置
同步：在react控制的回呼函數中：生命週期鉤子/react事件監聽回調
import React, { Component } from 'react'class Index extends Component { state={ count:1 } /* react事件监听回调中，setState()是异步状态 */ update1 = () => { console.log('update1 setState()之前',this.state.count); this.setState((state,props)=>({ count:state.count+1 })); console.log('update1 setState()之后',this.state.count); } /* react生命周期钩子中，setState()是异步更新状态 */ componentDidMount() { console.log('componentDidMount setState()之前',this.state.count); this.setState((state,props)=>({ count:state.count+1 })); console.log('componentDidMount setState()之后',this.state.count); } render() { console.log('render'); return (
currentState:{this.state.count}
) } } export default Index;
非同步：非react控制的非同步回呼函數中：定時器回呼/原生事件監聽回呼/Promise
import React, { Component } from 'react'class Index extends Component { state={ count:1 } /* 定时器回调 */ update1 = () => { setTimeout(()=>{ console.log('setTimeout setState()之前',this.state.count);//1 this.setState((state,props)=>({ count:state.count+1 })); console.log('setTimeout setState()之后',this.state.count);//2 }); } /* 原生事件回调 */ update2 = () => { const h1 = this.refs.count; h1.onclick = () => { console.log('onClick setState()之前',this.state.count);//1 this.setState((state,props)=>({ count:state.count+1 })); console.log('onClick setState()之后',this.state.count);//2 } } /* Promise回调 */ update3 = () => { Promise.resolve().then(value=>{ console.log('Promise setState()之前',this.state.count);//1 this.setState((state,props)=>({ count:state.count+1 })); console.log('Promise setState()之后',this.state.count);//2 }); } render() { console.log('render'); return (
currentState:{this.state.count}
) } } export default Index;
3.setState()多次呼叫的問題：
## 異步的setState()
（1）多次調用，處理方法： setState({})：合併更新一次狀態，只調用一次render()更新介面，多次調用會合併為一個，後面的值會覆蓋前面的值。 setState(fn)：更新多次狀態，只呼叫一次render()更新介面，多次呼叫不會合併為一個，後面的值會覆寫前面的值。
import React, { Component } from 'react'class Index extends Component { state={ count:1 } update1 = () => { console.log('update1 setState()之前',this.state.count); this.setState((state,props)=>({ count:state.count+1 })); console.log('update1 setState()之后',this.state.count); console.log('update1 setState()之前2',this.state.count); this.setState((state,props)=>({ count:state.count+1 })); console.log('update1 setState()之后2',this.state.count); } update2 = () => { console.log('update2 setState()之前',this.state.count); this.setState({ count:this.state.count+1 }); console.log('update2 setState()之后',this.state.count); console.log('update2 setState()之前2',this.state.count); this.setState({ count:this.state.count+1 }); console.log('update2 setState()之后2',this.state.count); } update3 = () => { console.log('update3 setState()之前',this.state.count); this.setState({ count:this.state.count+1 }); console.log('update3 setState()之后',this.state.count); console.log('update3 setState()之前2',this.state.count); this.setState((state,props)=>({ count:state.count+1 }));// 这里需要注意setState传参为函数模式时，state会确保拿到的是最新的值 console.log('update3 setState()之后2',this.state.count); } update4 = () => { console.log('update4 setState()之前',this.state.count); this.setState((state,props)=>({ count:state.count+1 })); console.log('update4 setState()之后',this.state.count); console.log('update4 setState()之前2',this.state.count); this.setState({ count:this.state.count+1 });// 这里需要注意的是如果setState传参为对象且在最后，那么会与之前的setState合并 console.log('update4 setState()之后2',this.state.count); } render() { console.log('render'); return (
currentState:{this.state.count}
) } } export default Index;
import React, { Component } from 'react'// setState执行顺序class Index extends Component { state={ count:0 } componentDidMount() { this.setState({count:this.state.count+1}); this.setState({count:this.state.count+1}); console.log(this.state.count);// 2 => 0 this.setState(state=>({count:state.count+1})); this.setState(state=>({count:state.count+1})); console.log(this.state.count);// 3 => 0 setTimeout(() => { this.setState({count:this.state.count+1}); console.log('setTimeout',this.state.count);// 10 => 6 this.setState({count:this.state.count+1}); console.log('setTimeout',this.state.count);// 12 => 7 }); Promise.resolve().then(value=>{ this.setState({count:this.state.count+1}); console.log('Promise',this.state.count);// 6 => 4 this.setState({count:this.state.count+1}); console.log('Promise',this.state.count);// 8 => 5 }); } render() { console.log('render',this.state.count);// 1 => 0 // 4 => 3 // 5 => 4 // 7 => 5 // 9 => 6 // 11 => 7 return (
currentState:{this.state.count}
) } } export default Index;
總結：react中setState()更新狀態的2種寫法
1）setState(updater，[callback]) updater：為傳回stateChange物件的函數：(state,props)=>stateChange，收到的state和props都保證為最新的
2）setState(stateChange，[callback]) stateChange為對象，callback是可選的回呼函數，在狀態更新且介面更新後面才執行
注意：
物件是函數方式的簡寫方式
如果新狀態不依賴原始狀態，則使用物件方式； 如果新狀態依賴原始狀態，則使用函數方式； 如果需要在setState()後取得最新的狀態數據，在第二個callback函數中取得 本文來自js教學欄目，歡迎學習！
以上是總結React中的setState的詳細內容。更多資訊請關注PHP中文網其他相關文章！
