setState使用詳解
前面我們有使用過(guò)setState的基本使用, 接下來(lái)我們對(duì)setState使用進(jìn)行詳細(xì)的介紹
使用setState的原因
開(kāi)發(fā)中我們并不能直接通過(guò)修改state的值來(lái)讓界面發(fā)生更新：
因?yàn)槲覀冃薷牧藄tate之后，希望React根據(jù)最新的State來(lái)重新渲染界面，但是
this.state這種方式的修改React并不知道數(shù)據(jù)發(fā)生了變化；React并沒(méi)有實(shí)現(xiàn)類似于Vue2中的Object.defineProperty或者Vue3中的Proxy的方式來(lái)監(jiān)聽(tīng)數(shù)據(jù)的變化(也就是說(shuō)React并沒(méi)有類似于Vue的數(shù)據(jù)劫持的)；
我們必須通過(guò)setState來(lái)告知React數(shù)據(jù)已經(jīng)發(fā)生了變化；
大家可能會(huì)有疑惑：在組件中并沒(méi)有實(shí)現(xiàn)setState的方法，為什么可以調(diào)用呢？
原因很簡(jiǎn)單，setState方法是從Component中繼承過(guò)來(lái)的。
我有找到對(duì)應(yīng)的源碼, 可以看到源碼中, setState是放在Component的原型上的
setState的基本用法
setState常見(jiàn)的用法
用法一: 直接在setState函數(shù)中傳入一個(gè)對(duì)象, 傳入的該對(duì)象會(huì)和
this.state的對(duì)象進(jìn)行一個(gè)合并, 相同的屬性會(huì)進(jìn)行覆蓋, 修改完成后等待任務(wù)隊(duì)列批處理調(diào)用render函數(shù)實(shí)現(xiàn)頁(yè)面更新
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ù)中傳入一個(gè)回調(diào)函數(shù), 要求傳入的回調(diào)函數(shù)返回一個(gè)對(duì)象, React內(nèi)部會(huì)將返回的這個(gè)對(duì)象和state對(duì)象進(jìn)行合并
這樣的做法有兩個(gè)好處:
好處一: 可以在該回調(diào)函數(shù)中, 編寫修改state數(shù)據(jù)的邏輯, 具有更強(qiáng)的內(nèi)聚性
好處二: 當(dāng)前回調(diào)函數(shù)會(huì)默認(rèn)將state和props傳入進(jìn)來(lái), 我們可以在回調(diào)函數(shù)中直接獲取, 不需要再通過(guò)
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);
// 對(duì)數(shù)據(jù)進(jìn)行操作的邏輯
const message = state.message + "Hello React"
// 該回調(diào)函數(shù)返回一個(gè)對(duì)象
return {
message
}
})
}
render() {
const { message } = this.state
return (
<div>
<h2>{message}</h2>
<button onClick={() => {this.changeText()}}>按鈕</button>
</div>
)
}
}
setState的異步更新
setState的更新是異步的嗎？
我們來(lái)驗(yàn)證一下是否真的是異步的, 如下代碼, 在執(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é)果, 可見(jiàn)setState是異步的操作，我們并不能在執(zhí)行完setState之后立馬拿到最新的state的結(jié)果
那么為什么setState設(shè)計(jì)為異步呢？
setState設(shè)計(jì)為異步其實(shí)之前在GitHub上也有很多的討論, 也有許多人會(huì)有同樣的疑惑；
React核心成員（Redux的作者）Dan Abramov也有對(duì)應(yīng)的回復(fù)，有興趣的同學(xué)可以參考一下；
https://github.com/facebook/react/issues/11527#issuecomment-360199710；
個(gè)人總結(jié)在Dan Abramov的回答中有說(shuō)到設(shè)計(jì)為異步的兩個(gè)主要原因
原因一: setState設(shè)計(jì)為異步，可以顯著的提升性能；
我們知道調(diào)用setState會(huì)讓render函數(shù)重新執(zhí)行, 如果每次調(diào)用 setState都進(jìn)行一次更新，那么意味著render函數(shù)會(huì)被頻繁調(diào)用，界面重新渲染，這樣效率是很低的；
最好的辦法應(yīng)該是獲取到多個(gè)更新，之后進(jìn)行批量更新(或者說(shuō)統(tǒng)一的更新)；
而React中的做法也是如此, 在一個(gè)時(shí)間段中, 會(huì)獲取多個(gè)更新, 再將多個(gè)更新放入一個(gè)任務(wù)隊(duì)列中, 再對(duì)任務(wù)隊(duì)列進(jìn)行批處理; 如果還有其他更新不在當(dāng)前時(shí)間段, 則在下一個(gè)時(shí)間段(或者其他時(shí)間段)的任務(wù)隊(duì)列中進(jìn)行批處理
- 例如下面代碼, 當(dāng)點(diǎn)擊按鈕時(shí), render函數(shù)只會(huì)執(zhí)行一次, 由此可見(jiàn)是有等待多個(gè)更新再進(jìn)行批處理的
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，但是還沒(méi)有執(zhí)行render函數(shù)，那么state和props不能保持同步；
state和props不能保持一致性，會(huì)在開(kāi)發(fā)中產(chǎn)生很多的問(wèn)題；
例如一個(gè)數(shù)據(jù)message有被展示到頁(yè)面中, 并且傳入到子組件中展示, 此時(shí)通過(guò)setState修改message, 如果是同步的修改完成后, message的值就被改變了; 并且修改完成的后續(xù)代碼有報(bào)錯(cuò)的情況, 在這個(gè)時(shí)候再進(jìn)行調(diào)試的時(shí)候, 會(huì)出現(xiàn)頁(yè)面中message的值被修改掉, 而傳入到子組件的message并沒(méi)有修改的情況, 導(dǎo)致于state和props中的數(shù)據(jù)不一致
setState獲取異步結(jié)果
那么如何可以獲取到更新后的值呢？
方式一：setState的回調(diào)
setState接受兩個(gè)參數(shù)：第一個(gè)參數(shù)我們剛剛講解過(guò)了, 第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在setState異步有了更新更新后會(huì)執(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>
)
}
}
當(dāng)然，我們也可以在生命周期函數(shù)：
componentDidUpdate() {
console.log(this.state.message);
}
setState一定是異步?
setState一定是異步操作嗎? 其實(shí)在React 18之前分成兩種情況：
情況一: 在組件生命周期或React的事件中，setState是異步；
情況二: 在setTimeout或者原生dom事件中，setState是同步；
changeText() {
// setTimeout
setTimeout(() => {
this.setState({ message: "你好啊" })
console.log(message) // 你好啊
}, 0);
}
- 在原生dom事件回調(diào)和promise回調(diào), 都是同步的, 這里不再演示****
在React18之后，默認(rèn)所有的操作都被放到了批處理中（也就是默認(rèn)所有操作都是異步處理的）, 在官方文檔中有說(shuō)明
在React 18之后, 如果希望代碼可以同步會(huì)拿到，則需要執(zhí)行特殊的flushSync操作:
注意: 使用flushSync需要在
react-dom包里面導(dǎo)入文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-779642.html
import { flushSync } from 'react-dom';
flushSync要求傳入一個(gè)回調(diào)函數(shù), 把要更新的數(shù)據(jù)放在回調(diào)函數(shù)中, 這樣就是同步的文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-779642.html
flushSync(() => {
this.setState({ message: "你好啊" })
})
// 這里獲取就是同步的
console.log(this.state.message) // 你好啊
到了這里，關(guān)于React中的setState使用細(xì)節(jié)和原理解析的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
