資訊專(zhuān)欄INFORMATION COLUMN
摘要：總結(jié)在組件生命周期中或者事件綁定中，是通過(guò)異步更新的。在延時(shí)的回調(diào)或者原生事件綁定的回調(diào)中調(diào)用不一定是異步的。這個(gè)結(jié)果并不說(shuō)明異步執(zhí)行的說(shuō)法是錯(cuò)誤的，更加準(zhǔn)確的說(shuō)法應(yīng)該是不能保證同步執(zhí)行。
在我們閱讀文檔的時(shí)候，大多都說(shuō)react的setState是異步的，可是它真的是異步的嗎？如果是，那我們還可以猜想：那可以不可以同步？那什么時(shí)候需要異步，什么時(shí)候需要同步呢？
我們先來(lái)看下react的官方對(duì)setSate的說(shuō)明：
將setState()認(rèn)為是一次請(qǐng)求而不是一次立即執(zhí)行更新組件的命令。為了更為可觀(guān)的性能，React可能會(huì)推遲它，稍后會(huì)一次性更新這些組件。React不會(huì)保證在setState之后，能夠立刻拿到改變的結(jié)果。
一個(gè)很經(jīng)典的例子：
// 初始state.count 當(dāng)前為 0
componentDidMount(){
this.setState({count: state.count + 1});
console.log(this.state.count)
}
如果你熟悉react，你一定知道最后的輸出結(jié)果是0，而不是1。
我們?cè)賮?lái)看一個(gè)例子
class Demo extends Component {
constructor(props) {
super(props);
this.state = { number: 0 };
}
render() {
return ;
}
componentDidMount() {
//手動(dòng)綁定mousedown事件
this.refs.button.addEventListener(
"mousedown",
this.onClick.bind(this)
);
//setTimeOut
setTimeout(this.onClick.bind(this), 1000);
}
onClick(event) {
if (event) {
console.log(event.type);
} else {
console.log("timeout");
}
console.log("prev state:", this.state.number);
this.setState({
number: this.state.number + 1
});
console.log("next state:", this.state.number);
}
}
export {Demo};
在這個(gè)組件中采用3中方法更新state
1.在div節(jié)點(diǎn)中綁定onClick事件 2.在componentDidMount中手動(dòng)綁定mousedown事件 3.在componentDidMount中使用setTimeout調(diào)用onClick
在點(diǎn)擊組件后，你可以猜到結(jié)果嗎？輸出結(jié)果是：
timeout prev state: 0 next state: 1 mousedown prev state: 1 next state: 2 click prev state: 2 next state: 2
結(jié)果似乎有點(diǎn)出人意料，三種方式只有在div上綁定的onClick事件輸出了可以證明setState是異步的結(jié)果，另外兩種方式顯示setState似乎是同步的。
總結(jié)：
1.在組件生命周期中或者react事件綁定中，setState是通過(guò)異步更新的。
2.在延時(shí)的回調(diào)或者原生事件綁定的回調(diào)中調(diào)用setState不一定是異步的。
這個(gè)結(jié)果并不說(shuō)明setState異步執(zhí)行的說(shuō)法是錯(cuò)誤的，更加準(zhǔn)確的說(shuō)法應(yīng)該是setState不能保證同步執(zhí)行。
個(gè)人學(xué)習(xí)總結(jié)，有錯(cuò)誤的地方歡迎指正??(???????)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102846.html
摘要：的參數(shù)既可以是一個(gè)對(duì)象，也可以是一個(gè)回調(diào)函數(shù)。回調(diào)函數(shù)提供了兩個(gè)參數(shù)，第一個(gè)參數(shù)就是計(jì)算過(guò)的對(duì)象，即便這時(shí)還沒(méi)有渲染，得到的依然是符合直覺(jué)的計(jì)算過(guò)的值。專(zhuān)題一覽什么是可變狀態(tài)不可變屬性生命周期組件事件操作抽象 本文是『horseshoe·React專(zhuān)題』系列文章之一，后續(xù)會(huì)有更多專(zhuān)題推出來(lái)我的 GitHub repo 閱讀完整的專(zhuān)題文章來(lái)我的 個(gè)人博客 獲得無(wú)與倫比的閱讀體驗(yàn) Reac...
摘要：用于規(guī)范的類(lèi)型與必需的狀態(tài)。表示由組件更改的數(shù)據(jù)，通常是通過(guò)與用戶(hù)的交互來(lái)更改的。為了實(shí)現(xiàn)的修改，需要注冊(cè)事件處理程序到相應(yīng)的元素上。當(dāng)事件發(fā)生時(shí)，將更新后的值是從中檢索，并通知組件。通常情況下，該函數(shù)初始化狀態(tài)使用，，或其他數(shù)據(jù)存儲(chǔ)。 前言 上一篇文章中，我們講到了JSX的一些用法和注意事項(xiàng)，這次我們來(lái)講react中最基礎(chǔ)也是特別重要的內(nèi)容：組件。這篇文章包含組件的以下內(nèi)容：狀態(tài)、屬...
摘要：虛擬的構(gòu)建在組件渲染到網(wǎng)頁(yè)前會(huì)執(zhí)行一個(gè)這個(gè)函數(shù)必須和一起使用該函數(shù)在組件更新完后會(huì)自動(dòng)執(zhí)行，第三個(gè)參數(shù)是的返回值階段發(fā)生在組件的刪除前，會(huì)自動(dòng)執(zhí)行，我們常用于清除組件之前被添加的還會(huì)繼續(xù)執(zhí)行的東西。 react 學(xué)習(xí)記錄 自己學(xué)習(xí)，記錄便于后面回顧 基礎(chǔ)知識(shí)點(diǎn)的記憶： state與props state是組件自己的數(shù)據(jù)，而props是父組件通過(guò)屬性賦值方式將其傳送給組件；這樣達(dá)到了，...
摘要：區(qū)別在于傳入一個(gè)更新函數(shù)，就可以訪(fǎng)問(wèn)當(dāng)前狀態(tài)值。后面兩次會(huì)同步更新，分別輸出，很顯然，我們可以將次簡(jiǎn)單規(guī)成兩類(lèi)是一類(lèi)中的又是一類(lèi)，因?yàn)檫@兩次在不同的調(diào)用棧中執(zhí)行。 寫(xiě)業(yè)務(wù)代碼的時(shí)候 需要經(jīng)常用到setState, 前幾天review代碼的時(shí)候， 又想了一下這個(gè)API， 發(fā)現(xiàn)對(duì)它的了解不是很清楚， 僅僅是 setState 是異步的, 周六在家參考了一些資料，簡(jiǎn)單整理了下，寫(xiě)的比較簡(jiǎn)單...
摘要：完整生命周期初始化參數(shù)第一次渲染當(dāng)父組件向子組件傳入發(fā)生改變后，依次調(diào)用子組件更新渲染當(dāng)組件自身發(fā)生變化后組件再次更新渲染當(dāng)組件卸載生命周期詳解此處請(qǐng)求接口數(shù)據(jù)子組件獲得新時(shí)觸發(fā)，作用是在子組件再次渲染前，更新子組件自身的，之后會(huì)觸發(fā)接受的 完整生命周期 constructor(props) // 初始化參數(shù) componentWillMount() render() // 第一次...
閱讀 943·2023-04-26 00:11
閱讀 2736·2021-11-04 16:13
閱讀 2187·2021-09-09 09:33
閱讀 1552·2021-08-20 09:35
閱讀 3938·2021-08-09 13:42
閱讀 3675·2019-08-30 15:55
閱讀 1201·2019-08-30 15:55
閱讀 2284·2019-08-30 13:55
