React中的setState使用細節(jié)和原理解析(最新推薦)
setState使用詳解
前面我們有使用過setState的基本使用, 接下來我們對setState使用進行詳細的介紹
使用setState的原因
開發(fā)中我們并不能直接通過修改state的值來讓界面發(fā)生更新：
因為我們修改了state之后，希望React根據最新的State來重新渲染界面，但是
this.state這種方式的修改React并不知道數據發(fā)生了變化；React并沒有實現類似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式來監(jiān)聽數據的變化(也就是說React并沒有類似于Vue的數據劫持的)；
我們必須通過setState來告知React數據已經發(fā)生了變化；
大家可能會有疑惑：在組件中并沒有實現setState的方法，為什么可以調用呢？
原因很簡單，setState方法是從Component中繼承過來的。
我有找到對應的源碼, 可以看到源碼中, setState是放在Component的原型上的
setState的基本用法
setState常見的用法
用法一: 直接在setState函數中傳入一個對象, 傳入的該對象會和
this.state的對象進行一個合并, 相同的屬性會進行覆蓋, 修改完成后等待任務隊列批處理調用render函數實現頁面更新
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函數中傳入一個回調函數, 要求傳入的回調函數返回一個對象, React內部會將返回的這個對象和state對象進行合并
這樣的做法有兩個好處:
好處一: 可以在該回調函數中, 編寫修改state數據的邏輯, 具有更強的內聚性
好處二: 當前回調函數會默認將state和props傳入進來, 我們可以在回調函數中直接獲取, 不需要再通過
this.state或this.props的方式獲取;
export class App extends Component {
constructor() {
super()
this.state = {
message: "Hello World"
}
}
changeText() {
this.setState((state, props) => {
// 可以直接在回調函數中獲取state和props
console.log(state, props);
// 對數據進行操作的邏輯
const message = state.message + "Hello React"
// 該回調函數返回一個對象
return {
message
}
})
}
render() {
const { message } = this.state
return (
<div>
<h2>{message}</h2>
<button onClick={() => {this.changeText()}}>按鈕</button>
</div>
)
}
}
setState的異步更新
setState的更新是異步的嗎？
我們來驗證一下是否真的是異步的, 如下代碼, 在執(zhí)行完setState后, 我們立即打印一下message的結果
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>
)
}
}
打印結果為Hello World, 并不是修改后的結果, 可見setState是異步的操作，我們并不能在執(zhí)行完setState之后立馬拿到最新的state的結果
那么為什么setState設計為異步呢？
setState設計為異步其實之前在GitHub上也有很多的討論, 也有許多人會有同樣的疑惑；
React核心成員（Redux的作者）Dan Abramov也有對應的回復，有興趣的同學可以參考一下；
https://github.com/facebook/react/issues/11527#issuecomment-360199710；
個人總結在Dan Abramov的回答中有說到設計為異步的兩個主要原因
原因一: setState設計為異步，可以顯著的提升性能；
我們知道調用setState會讓render函數重新執(zhí)行, 如果每次調用 setState都進行一次更新，那么意味著render函數會被頻繁調用，界面重新渲染，這樣效率是很低的；
最好的辦法應該是獲取到多個更新，之后進行批量更新(或者說統(tǒng)一的更新)；
而React中的做法也是如此, 在一個時間段中, 會獲取多個更新, 再將多個更新放入一個任務隊列中, 再對任務隊列進行批處理; 如果還有其他更新不在當前時間段, 則在下一個時間段(或者其他時間段)的任務隊列中進行批處理
例如下面代碼, 當點擊按鈕時, render函數只會執(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函數執(zhí)行")
const { message } = this.state
return (
<div>
<h2>{message}</h2>
<button onClick={() => {this.changeText()}}>按鈕</button>
</div>
)
}
}
原因二: 如果同步更新了state，但是還沒有執(zhí)行render函數，那么state和props不能保持同步；
state和props不能保持一致性，會在開發(fā)中產生很多的問題；
例如一個數據message有被展示到頁面中, 并且傳入到子組件中展示, 此時通過setState修改message, 如果是同步的修改完成后, message的值就被改變了; 并且修改完成的后續(xù)代碼有報錯的情況, 在這個時候再進行調試的時候, 會出現頁面中message的值被修改掉, 而傳入到子組件的message并沒有修改的情況, 導致于state和props中的數據不一致
setState獲取異步結果
那么如何可以獲取到更新后的值呢？
方式一：setState的回調
setState接受兩個參數：第一個參數我們剛剛講解過了, 第二個參數是一個回調函數，這個回調函數會在setState異步有了更新更新后會執(zhí)行；
格式如下：setState(partialState, callback)
export class App extends Component {
constructor() {
super()
this.state = {
message: "Hello World"
}
}
changeText() {
// 參數二回調函數可以保證拿到的數據是更新后的
this.setState({ message: "你好啊" }, () => {
console.log(this.state.message) // 你好啊
})
}
render() {
console.log("render函數執(zhí)行")
const { message } = this.state
return (
<div>
<h2>{message}</h2>
<button onClick={() => {this.changeText()}}>按鈕</button>
</div>
)
}
}
當然，我們也可以在生命周期函數：
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事件回調和promise回調, 都是同步的, 這里不再演示****
在React18之后，默認所有的操作都被放到了批處理中（也就是默認所有操作都是異步處理的）, 在官方文檔中有說明
在React 18之后, 如果希望代碼可以同步會拿到，則需要執(zhí)行特殊的flushSync操作:
注意: 使用flushSync需要在
react-dom包里面導入
import { flushSync } from 'react-dom';flushSync要求傳入一個回調函數, 把要更新的數據放在回調函數中, 這樣就是同步的
flushSync(() => {
this.setState({ message: "你好啊" })
})
// 這里獲取就是同步的
console.log(this.state.message) // 你好啊到此這篇關于React中的setState使用細節(jié)和原理解析的文章就介紹到這了,更多相關React中setState使用原理內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了react實現阻止父容器滾動方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
如何應用?SOLID?原則在?React?中整理代碼之開閉原則
React?不是面向對象，但這些原則背后的主要思想可能是有幫助的，在本文中，我將嘗試演示如何應用這些原則來編寫更好的代碼，對React?SOLID原則開閉原則相關知識感興趣的朋友一起看看吧2022-07-07
這篇文章主要介紹了React 添加引用路徑時如何使用@符號作為src文件,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
在復雜的React應用中,某些計算密集型或耗時操作可能會阻塞主線程,導致用戶界面出現卡頓或響應慢的現象,為了優(yōu)化用戶體驗,可以采用Web Worker來在后臺線程中執(zhí)行這些操作,本文將詳細介紹在React項目中如何集成和使用Web Worker來改善應用性能,需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了React DnD如何處理拖拽示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
本文我們將和大家一起來研究如何有效地將組件解耦,讓我們的代碼變的復用性極高,文中通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-11-11
解決React報錯Functions are not valid as
這篇文章主要為大家介紹了React報錯Functions are not valid as a React child解決詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了React事件處理的機制及原理，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本文主要介紹了React 項目中動態(tài)設置環(huán)境變量，本文將介紹兩種常用的方法，使用 dotenv 庫和通過命令行參數傳遞環(huán)境變量，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了React 18版本配置rem 和 vw的詳細步驟,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01