React中的useState和setState的執(zhí)行機(jī)制詳解
useState和setState的執(zhí)行機(jī)制
useState 和 setState 在React開(kāi)發(fā)過(guò)程中 使用很頻繁，但很多人都停留在簡(jiǎn)單的使用階段，并沒(méi)有正在了解它們的執(zhí)行機(jī)制
例如：**它們是同步的還是異步的？**正因?yàn)闆](méi)有理解它們，才致使開(kāi)發(fā)過(guò)程中會(huì)碰到一些出乎意料的bug。
本文將帶大家了解它們的特性。
它們是同步的還是異步的？
setState和 useState 只在合成事件如onClick等和鉤子函數(shù)包括componentDidMount、useEffect等中是“異步”的，在原生事件和 setTimeout、Promise.resolve().then 中都是同步的。
這里的“異步”并不是說(shuō)內(nèi)部由異步代碼實(shí)現(xiàn)，其實(shí)本身執(zhí)行的過(guò)程和代碼都是同步的，只是合成事件和鉤子函數(shù)的調(diào)用順序在更新之前，導(dǎo)致在合成事件和鉤子函數(shù)中沒(méi)法立馬拿到更新后的值，形式了所謂的“異步”。
批量更新優(yōu)化
也是建立在“異步”（合成事件、鉤子函數(shù)）之上的，在原生事件和setTimeout、Promise.resolve().then 中不會(huì)批量更新，在“異步”中如果對(duì)同一個(gè)值進(jìn)行多次修改，批量更新策略會(huì)對(duì)其進(jìn)行覆蓋，取最后一次的執(zhí)行,類似于Object.assin的機(jī)制，如果是同時(shí)修改多個(gè)不同的變量的值，比如改變了a的值又改變了b的值，在更新時(shí)會(huì)對(duì)其進(jìn)行合并批量更新，結(jié)果只會(huì)產(chǎn)生一次render。
假如在一個(gè)合成事件中，循環(huán)調(diào)用了setState方法n次，如果 React 沒(méi)有優(yōu)化，當(dāng)前組件就要被渲染n次，這對(duì)性能來(lái)說(shuō)是很大的浪費(fèi)。所以，React 為了性能原因，對(duì)調(diào)用多次setState方法合并為一個(gè)來(lái)執(zhí)行。當(dāng)執(zhí)行setState的時(shí)候，state中的數(shù)據(jù)并不會(huì)馬上更新。
光怎么說(shuō)肯定不容易理解，我們來(lái)通過(guò)幾個(gè)案例來(lái)說(shuō)明吧。
同步和異步情況下，連續(xù)執(zhí)行兩個(gè) 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í)行兩個(gè) 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)點(diǎn)擊
同步執(zhí)行按鈕時(shí)，只重新render了一次 - 當(dāng)點(diǎn)擊
異步執(zhí)行按鈕時(shí)，render了兩次
同步和異步情況下，連續(xù)執(zhí)行兩次同一個(gè) 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)點(diǎn)擊
同步執(zhí)行按鈕時(shí)，兩次setA都執(zhí)行，但合并render了一次，打印 3 - 當(dāng)點(diǎn)擊
異步執(zhí)行按鈕時(shí)，兩次setA各自render一次，分別打印 2，3
同步和異步情況下，連續(xù)執(zhí)行兩個(gè) 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)點(diǎn)擊
同步執(zhí)行按鈕時(shí)，只重新render了一次 - 當(dāng)點(diǎn)擊
異步執(zhí)行按鈕時(shí)，render了兩次
同步和異步情況下，連續(xù)執(zhí)行兩次同一個(gè) 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)點(diǎn)擊
同步執(zhí)行按鈕時(shí)，兩次setState合并，只執(zhí)行了最后一次，打印 2 - 當(dāng)點(diǎn)擊
異步執(zhí)行按鈕時(shí)，兩次setState各自render一次，分別打印 2，3
至此，大家應(yīng)該明白它們什么時(shí)候是同步，什么時(shí)候是異步了吧。
我們?cè)賮?lái)看下面這個(gè)栗子：
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>
)
}
點(diǎn)擊一次按鈕輸出的是
1： 1
2： 0
那么問(wèn)題來(lái)了，為什么在setCount之后輸出的是2： 0而不是2： 1
因?yàn)閒unction state 保存的是快照，class state 保存的是最新值。這么說(shuō)可能還會(huì)不太理解，我們看看下面這栗子：
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>
)
}
}
點(diǎn)擊一次按鈕輸出的是
1
this.state.count = 1
count = 0
所以實(shí)際上this.state已經(jīng)更新，只是因?yàn)?code>setTimeout的閉包影響count保存的還是原先的值。
那么當(dāng)我們快速的點(diǎn)擊三次時(shí)又會(huì)發(fā)送什么呢？
你會(huì)發(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。同樣也是因?yàn)?code>setTimeout閉包的影響，三次this.setState({count: count + 1});
相當(dāng)于三次this.setState({count: 0 + 1});，那么如果我們想按照正常情況加3該怎么辦呢？
在class 組件里我們可以做如下修改：
this.setState({count: this.state.count + 1});class 組件里面可以通過(guò) this.state 引用到 count，所以每次 setTimeout 的時(shí)候都能通過(guò)引用拿到上一次的最新 count，所以點(diǎn)擊多少次最后就加了多少。
在 function component 里面每次更新都是重新執(zhí)行當(dāng)前函數(shù)，也就是說(shuō) setTimeout 里面讀取到的 count 是通過(guò)閉包獲取的，而這個(gè) count 實(shí)際上只是初始值，并不是上次執(zhí)行完成后的最新值，所以最后只加了1次。
setState和setCount方法除了傳入值外還可以傳入一個(gè)返回值的函數(shù)，用這種方法我們就可以實(shí)現(xiàn)正常的情況了：
this.setState((preState) => ({
...preState, count: preState.count + 1
}));
// or
setCount((count) => count + 1);
或許你會(huì)想，如果模仿類組件里面的 this.state，我們用一個(gè)引用來(lái)保存 count 不就好了嗎？
沒(méi)錯(cuò)，這樣是可以解決，只是這個(gè)引用該怎么寫(xiě)呢？
我在 state 里面設(shè)置一個(gè)對(duì)象好不好？就像下面這樣：
const [state, setState] = useState({ count: 0 })答案是不行，因?yàn)榧词?state 是個(gè)對(duì)象，但每次更新的時(shí)候，要傳一個(gè)新的引用進(jìn)去，這樣的引用依然是沒(méi)有意義。
setState({ count: state.count + 1 })想要解決這個(gè)問(wèn)題，那就涉及到另一個(gè)新的 Hook 方法 —— useRef。
useRef 是一個(gè)對(duì)象，它擁有一個(gè) current 屬性，并且不管函數(shù)組件執(zhí)行多少次，而 useRef 返回的對(duì)象永遠(yuǎn)都是原來(lái)那一個(gè)。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
react項(xiàng)目中@路徑簡(jiǎn)單配置指南
這篇文章主要給大家介紹了關(guān)于react項(xiàng)目中@路徑簡(jiǎn)單配置的相關(guān)資料,文中還介紹了React配置@路徑別名的方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
React中函數(shù)式組件的基本意義是,組件實(shí)際上是一個(gè)函數(shù),不是類,下面就來(lái)給大家介紹一下關(guān)于React中函數(shù)組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
React實(shí)現(xiàn)動(dòng)態(tài)調(diào)用的彈框組件
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)動(dòng)態(tài)調(diào)用的彈框組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了React Redux Hooks的使用詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了詳解react組件通訊方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
這篇文章主要為大家介紹了React初始化渲染過(guò)程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
useState 通過(guò)在函數(shù)組件里調(diào)用它來(lái)給組件添加一些內(nèi)部 state，React 會(huì)在重復(fù)渲染時(shí)保留這個(gè) state，接下來(lái)通過(guò)一個(gè)示例來(lái)看看怎么使用 useState吧2021-06-06
React 中淺比較的概念無(wú)處不在，它在不同的流程中起著關(guān)鍵的作用，本文主要介紹了React 中的淺比較是如何工作的，具有一定的參考價(jià)值，感興趣的可以了解一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)React自動(dòng)化實(shí)現(xiàn)骨架屏,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
react中實(shí)現(xiàn)修改input的defaultValue
這篇文章主要介紹了react中實(shí)現(xiàn)修改input的defaultValue方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05