React中setState使用原理解析
setState使用詳解
前面我們有使用過setState的基本使用, 接下來我們對setState使用進行詳細的介紹
使用setState的原因
開發(fā)中我們并不能直接通過修改state的值來讓界面發(fā)生更新:
因為我們修改了state之后,希望React根據(jù)最新的State來重新渲染界面,但是
this.state
這種方式的修改React并不知道數(shù)據(jù)發(fā)生了變化;React并沒有實現(xiàn)類似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式來監(jiān)聽數(shù)據(jù)的變化(也就是說React并沒有類似于Vue的數(shù)據(jù)劫持的);
我們必須通過setState來告知React數(shù)據(jù)已經(jīng)發(fā)生了變化;
大家可能會有疑惑:在組件中并沒有實現(xiàn)setState的方法,為什么可以調(diào)用呢?
原因很簡單,setState方法是從Component中繼承過來的。
我有找到對應的源碼, 可以看到源碼中, setState是放在Component的原型上的
setState的基本用法
setState常見的用法
用法一: 直接在setState函數(shù)中傳入一個對象, 傳入的該對象會和
this.state
的對象進行一個合并, 相同的屬性會進行覆蓋, 修改完成后等待任務隊列批處理調(diào)用render函數(shù)實現(xiàn)頁面更新
export class App extends Component { constructor() { super() this.state = { message: "Hello World" } } changeText() { this.setState({ message: "你好啊" }) } render() { const { message } = this.state return ( <div> <h2>{message}</h2> <button onClick={() => {this.changeText()}}>按鈕</button> </div> ) } }
用法二: 在setState函數(shù)中傳入一個回調(diào)函數(shù), 要求傳入的回調(diào)函數(shù)返回一個對象, React內(nèi)部會將返回的這個對象和state對象進行合并
這樣的做法有兩個好處:
好處一: 可以在該回調(diào)函數(shù)中, 編寫修改state數(shù)據(jù)的邏輯, 具有更強的內(nèi)聚性
好處二: 當前回調(diào)函數(shù)會默認將state和props傳入進來, 我們可以在回調(diào)函數(shù)中直接獲取, 不需要再通過
this.state
或this.props
的方式獲取;
export class App extends Component { constructor() { super() this.state = { message: "Hello World" } } changeText() { this.setState((state, props) => { // 可以直接在回調(diào)函數(shù)中獲取state和props console.log(state, props); // 對數(shù)據(jù)進行操作的邏輯 const message = state.message + "Hello React" // 該回調(diào)函數(shù)返回一個對象 return { message } }) } render() { const { message } = this.state return ( <div> <h2>{message}</h2> <button onClick={() => {this.changeText()}}>按鈕</button> </div> ) } }
setState的異步更新
setState的更新是異步的嗎?
我們來驗證一下是否真的是異步的, 如下代碼, 在執(zhí)行完setState后, 我們立即打印一下message的結(jié)果
export class App extends Component { constructor() { super() this.state = { message: "Hello World" } } changeText() { // 用法一 this.setState({ message: "你好啊" }) console.log(this.state.message) // Hello World } render() { const { message } = this.state return ( <div> <h2>{message}</h2> <button onClick={() => {this.changeText()}}>按鈕</button> </div> ) } }
打印結(jié)果為Hello World, 并不是修改后的結(jié)果, 可見setState是異步的操作,我們并不能在執(zhí)行完setState之后立馬拿到最新的state的結(jié)果
那么為什么setState設計為異步呢?
setState設計為異步其實之前在GitHub上也有很多的討論, 也有許多人會有同樣的疑惑;
React核心成員(Redux的作者)Dan Abramov也有對應的回復,有興趣的同學可以參考一下;
https://github.com/facebook/react/issues/11527#issuecomment-360199710;
個人總結(jié)在Dan Abramov的回答中有說到設計為異步的兩個主要原因
原因一
: setState設計為異步,可以顯著的提升性能;
我們知道調(diào)用setState會讓render函數(shù)重新執(zhí)行, 如果每次調(diào)用 setState都進行一次更新,那么意味著render函數(shù)會被頻繁調(diào)用,界面重新渲染,這樣效率是很低的;
最好的辦法應該是獲取到多個更新,之后進行批量更新(或者說統(tǒng)一的更新);
而React中的做法也是如此, 在一個時間段中, 會獲取多個更新, 再將多個更新放入一個任務隊列中, 再對任務隊列進行批處理; 如果還有其他更新不在當前時間段, 則在下一個時間段(或者其他時間段)的任務隊列中進行批處理
例如下面代碼, 當點擊按鈕時, render函數(shù)只會執(zhí)行一次, 由此可見是有等待多個更新再進行批處理的
export class App extends Component { constructor() { super() this.state = { message: "Hello World" } } changeText() { this.setState({ message: "你" }) this.setState({ message: "你好" }) this.setState({ message: "你好啊" }) } render() { console.log("render函數(shù)執(zhí)行") const { message } = this.state return ( <div> <h2>{message}</h2> <button onClick={() => {this.changeText()}}>按鈕</button> </div> ) } }
原因二
: 如果同步更新了state,但是還沒有執(zhí)行render函數(shù),那么state和props不能保持同步;
state和props不能保持一致性,會在開發(fā)中產(chǎn)生很多的問題;
例如一個數(shù)據(jù)message有被展示到頁面中, 并且傳入到子組件中展示, 此時通過setState修改message, 如果是同步的修改完成后, message的值就被改變了; 并且修改完成的后續(xù)代碼有報錯的情況, 在這個時候再進行調(diào)試的時候, 會出現(xiàn)頁面中message的值被修改掉, 而傳入到子組件的message并沒有修改的情況, 導致于state和props中的數(shù)據(jù)不一致
setState獲取異步結(jié)果
那么如何可以獲取到更新后的值呢?
方式一:setState的回調(diào)
setState接受兩個參數(shù):第一個參數(shù)我們剛剛講解過了, 第二個參數(shù)是一個回調(diào)函數(shù),這個回調(diào)函數(shù)會在setState異步有了更新更新后會執(zhí)行;
格式如下:setState(partialState, callback)
export class App extends Component { constructor() { super() this.state = { message: "Hello World" } } changeText() { // 參數(shù)二回調(diào)函數(shù)可以保證拿到的數(shù)據(jù)是更新后的 this.setState({ message: "你好啊" }, () => { console.log(this.state.message) // 你好啊 }) } render() { console.log("render函數(shù)執(zhí)行") const { message } = this.state return ( <div> <h2>{message}</h2> <button onClick={() => {this.changeText()}}>按鈕</button> </div> ) } }
當然,我們也可以在生命周期函數(shù):
componentDidUpdate() { console.log(this.state.message); }
setState一定是異步?
setState一定是異步操作嗎? 其實在React 18之前
分成兩種情況:
情況一: 在組件生命周期或React的事件中,setState是異步;
情況二: 在setTimeout或者原生dom事件中,setState是同步;
changeText() { // setTimeout setTimeout(() => { this.setState({ message: "你好啊" }) console.log(message) // 你好啊 }, 0); }
在原生dom事件回調(diào)和promise回調(diào), 都是同步的, 這里不再演示****
在React18之后
,默認所有的操作都被放到了批處理中(也就是默認所有操作都是異步處理的), 在官方文檔中有說明
在React 18之后, 如果希望代碼可以同步會拿到,則需要執(zhí)行特殊的flushSync操作:
注意: 使用flushSync需要在
react-dom
包里面導入
import { flushSync } from 'react-dom';
flushSync要求傳入一個回調(diào)函數(shù), 把要更新的數(shù)據(jù)放在回調(diào)函數(shù)中, 這樣就是同步的
flushSync(() => { this.setState({ message: "你好啊" }) }) // 這里獲取就是同步的 console.log(this.state.message) // 你好啊
到此這篇關于React中的setState使用細節(jié)和原理解析的文章就介紹到這了,更多相關React setState使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
詳解react-native WebView 返回處理(非回調(diào)方法可解決)
這篇文章主要介紹了詳解react-native WebView 返回處理(非回調(diào)方法可解決),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-02-02Vite+React搭建開發(fā)構(gòu)建環(huán)境實踐記錄
這篇文章主要介紹了Vite+React搭建開發(fā)構(gòu)建環(huán)境實踐,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09