React中的useState和setState的執(zhí)行機制詳解
useState和setState的執(zhí)行機制
useState 和 setState 在React開發(fā)過程中 使用很頻繁，但很多人都停留在簡單的使用階段，并沒有正在了解它們的執(zhí)行機制
例如：**它們是同步的還是異步的？**正因為沒有理解它們，才致使開發(fā)過程中會碰到一些出乎意料的bug。
本文將帶大家了解它們的特性。
它們是同步的還是異步的？
setState和 useState 只在合成事件如onClick等和鉤子函數(shù)包括componentDidMount、useEffect等中是“異步”的，在原生事件和 setTimeout、Promise.resolve().then 中都是同步的。
這里的“異步”并不是說內(nèi)部由異步代碼實現(xiàn)，其實本身執(zhí)行的過程和代碼都是同步的，只是合成事件和鉤子函數(shù)的調(diào)用順序在更新之前，導(dǎo)致在合成事件和鉤子函數(shù)中沒法立馬拿到更新后的值，形式了所謂的“異步”。
批量更新優(yōu)化
也是建立在“異步”（合成事件、鉤子函數(shù)）之上的，在原生事件和setTimeout、Promise.resolve().then 中不會批量更新，在“異步”中如果對同一個值進行多次修改，批量更新策略會對其進行覆蓋，取最后一次的執(zhí)行,類似于Object.assin的機制，如果是同時修改多個不同的變量的值，比如改變了a的值又改變了b的值，在更新時會對其進行合并批量更新，結(jié)果只會產(chǎn)生一次render。
假如在一個合成事件中，循環(huán)調(diào)用了setState方法n次，如果 React 沒有優(yōu)化，當(dāng)前組件就要被渲染n次，這對性能來說是很大的浪費。所以，React 為了性能原因，對調(diào)用多次setState方法合并為一個來執(zhí)行。當(dāng)執(zhí)行setState的時候，state中的數(shù)據(jù)并不會馬上更新。
光怎么說肯定不容易理解，我們來通過幾個案例來說明吧。
同步和異步情況下，連續(xù)執(zhí)行兩個 useState 示例
function Component() {
const [a, setA] = useState(1)
const [b, setB] = useState('b')
console.log('render')
function handleClickWithPromise() {
Promise.resolve().then(() => {
setA((a) => a + 1)
setB('bb')
})
}
function handleClickWithoutPromise() {
setA((a) => a + 1)
setB('bb')
}
return (
<Fragment>
<button onClick={handleClickWithPromise}>
{a}- 異步執(zhí)行
</button>
<button onClick={handleClickWithoutPromise}>
{a}- 同步執(zhí)行
</button>
</Fragment>
)
}
同步和異步情況下，連續(xù)執(zhí)行兩個 useState 示例
function Component() {
const [a, setA] = useState(1)
const [b, setB] = useState('b')
console.log('render')
function handleClickWithPromise() {
Promise.resolve().then(() => {
setA((a) => a + 1)
setB('bb')
})
}
function handleClickWithoutPromise() {
setA((a) => a + 1)
setB('bb')
}
return (
<Fragment>
<button onClick={handleClickWithPromise}>
{a}- 異步執(zhí)行
</button>
<button onClick={handleClickWithoutPromise}>
{a}- 同步執(zhí)行
</button>
</Fragment>
)
}
- 當(dāng)點擊
同步執(zhí)行按鈕時，只重新render了一次 - 當(dāng)點擊
異步執(zhí)行按鈕時，render了兩次
同步和異步情況下，連續(xù)執(zhí)行兩次同一個 useState 示例
function Component() {
const [a, setA] = useState(1)
console.log('a', a)
function handleClickWithPromise() {
Promise.resolve().then(() => {
setA((a) => a + 1)
setA((a) => a + 1)
})
}
function handleClickWithoutPromise() {
setA((a) => a + 1)
setA((a) => a + 1)
}
return (
<Fragment>
<button onClick={handleClickWithPromise}>{a} 異步執(zhí)行</button>
<button onClick={handleClickWithoutPromise}>{a} 同步執(zhí)行</button>
</Fragment>
)
}
- 當(dāng)點擊
同步執(zhí)行按鈕時，兩次setA都執(zhí)行，但合并render了一次，打印 3 - 當(dāng)點擊
異步執(zhí)行按鈕時，兩次setA各自render一次，分別打印 2，3
同步和異步情況下，連續(xù)執(zhí)行兩個 setState 示例
class Component extends React.Component {
constructor(props) {
super(props)
this.state = {
a: 1,
b: 'b',
}
}
handleClickWithPromise = () => {
Promise.resolve().then(() => {
this.setState({...this.state, a: 'aa'})
this.setState({...this.state, b: 'bb'})
})
}
handleClickWithoutPromise = () => {
this.setState({...this.state, a: 'aa'})
this.setState({...this.state, b: 'bb'})
}
render() {
console.log('render')
return (
<Fragment>
<button onClick={this.handleClickWithPromise}>異步執(zhí)行</button>
<button onClick={this.handleClickWithoutPromise}>同步執(zhí)行</button>
</Fragment>
)
}
}
- 當(dāng)點擊
同步執(zhí)行按鈕時，只重新render了一次 - 當(dāng)點擊
異步執(zhí)行按鈕時，render了兩次
同步和異步情況下，連續(xù)執(zhí)行兩次同一個 setState 示例
class Component extends React.Component {
constructor(props) {
super(props)
this.state = {
a: 1,
}
}
handleClickWithPromise = () => {
Promise.resolve().then(() => {
this.setState({a: this.state.a + 1})
this.setState({a: this.state.a + 1})
})
}
handleClickWithoutPromise = () => {
this.setState({a: this.state.a + 1})
this.setState({a: this.state.a + 1})
}
render() {
console.log('a', this.state.a)
return (
<Fragment>
<button onClick={this.handleClickWithPromise}>異步執(zhí)行</button>
<button onClick={this.handleClickWithoutPromise}>同步執(zhí)行</button>
</Fragment>
)
}
}
- 當(dāng)點擊
同步執(zhí)行按鈕時，兩次setState合并，只執(zhí)行了最后一次，打印 2 - 當(dāng)點擊
異步執(zhí)行按鈕時，兩次setState各自render一次，分別打印 2，3
至此，大家應(yīng)該明白它們什么時候是同步，什么時候是異步了吧。
我們再來看下面這個栗子：
function App() {
const [count, setCount] = useState(0);
console.log('1：', count);
return (
<div>
<p>App:You clicked {count} times</p>
<button onClick={() => {
setCount(count + 1);
console.log('2：', count);
}}>
Click me
</button>
</div>
)
}
點擊一次按鈕輸出的是
1： 1
2： 0
那么問題來了，為什么在setCount之后輸出的是2： 0而不是2： 1
因為function state 保存的是快照，class state 保存的是最新值。這么說可能還會不太理解，我們看看下面這栗子：
class App extends Component {
constructor(props) {
super(props)
this.state = {
count: 0
}
}
render() {
const { count } = this.state;
console.log(count);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => {
setTimeout(() => {
this.setState({count: count + 1});
console.log('this.state.count = ', this.state.count);
console.log('count = ', count);
}, 1000)
}}>
Click me
</button>
</div>
)
}
}
點擊一次按鈕輸出的是
1
this.state.count = 1
count = 0
所以實際上this.state已經(jīng)更新，只是因為setTimeout的閉包影響count保存的還是原先的值。
那么當(dāng)我們快速的點擊三次時又會發(fā)送什么呢？
你會發(fā)現(xiàn)輸出結(jié)果是：
1
this.state.count = 1
count = 0
1
this.state.count = 1
count = 0
1
this.state.count = 1
count = 0
顯示的是You clicked 1 times。同樣也是因為setTimeout閉包的影響，三次this.setState({count: count + 1});
相當(dāng)于三次this.setState({count: 0 + 1});，那么如果我們想按照正常情況加3該怎么辦呢？
在class 組件里我們可以做如下修改：
this.setState({count: this.state.count + 1});class 組件里面可以通過 this.state 引用到 count，所以每次 setTimeout 的時候都能通過引用拿到上一次的最新 count，所以點擊多少次最后就加了多少。
在 function component 里面每次更新都是重新執(zhí)行當(dāng)前函數(shù)，也就是說 setTimeout 里面讀取到的 count 是通過閉包獲取的，而這個 count 實際上只是初始值，并不是上次執(zhí)行完成后的最新值，所以最后只加了1次。
setState和setCount方法除了傳入值外還可以傳入一個返回值的函數(shù)，用這種方法我們就可以實現(xiàn)正常的情況了：
this.setState((preState) => ({
...preState, count: preState.count + 1
}));
// or
setCount((count) => count + 1);
或許你會想，如果模仿類組件里面的 this.state，我們用一個引用來保存 count 不就好了嗎？
沒錯，這樣是可以解決，只是這個引用該怎么寫呢？
我在 state 里面設(shè)置一個對象好不好？就像下面這樣：
const [state, setState] = useState({ count: 0 })答案是不行，因為即使 state 是個對象，但每次更新的時候，要傳一個新的引用進去，這樣的引用依然是沒有意義。
setState({ count: state.count + 1 })想要解決這個問題，那就涉及到另一個新的 Hook 方法 —— useRef。
useRef 是一個對象，它擁有一個 current 屬性，并且不管函數(shù)組件執(zhí)行多少次，而 useRef 返回的對象永遠都是原來那一個。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React Native基礎(chǔ)入門之調(diào)試React Native應(yīng)用的一小步
這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之調(diào)試React Native應(yīng)用的相關(guān)資料，文中通過圖文介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要介紹了詳解React服務(wù)端渲染從入門到精通，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
react+antd select下拉框?qū)崿F(xiàn)模糊搜索匹配的示例代碼
我們在開發(fā)過程中，經(jīng)常會出現(xiàn)下拉框數(shù)據(jù)很多得情況，本文主要介紹了react+antd select下拉框?qū)崿F(xiàn)模糊搜索匹配的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
前端 React實現(xiàn)數(shù)據(jù)懶加載和滾動觸底加載數(shù)據(jù)的過程
本文給大家介紹前端React實現(xiàn)數(shù)據(jù)懶加載和滾動觸底加載數(shù)據(jù)的過程,本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-08-08
react中使用forEach或map兩種方式遍歷數(shù)組
這篇文章主要介紹了react中使用forEach或map兩種方式遍歷數(shù)組，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
jsx就是javsscript與xml結(jié)合的一種格式，是js語法的一種擴展，只要把html代碼寫在js中就是jsx。react中定義組件有3種寫法：函數(shù)的方式、es5的寫法、es6（類）的寫法2022-08-08
state 中可以保存任意類型的JavaScript值，包括對象，但是，不應(yīng)該直接修改存放在 React state 中的對象，這篇文章主要介紹了React?18更新state中的對象,需要的朋友可以參考下2023-08-08
react render props模式實現(xiàn)組件復(fù)用示例
本文主要介紹了react render props模式實現(xiàn)組件復(fù)用示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要為大家詳細介紹了react封裝Dialog彈框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了React如何通過@craco/craco代理接口問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10