開始使用react已經(jīng)有快一年的時(shí)間了孽亲，但是對(duì)其背后的原理也好 實(shí)現(xiàn)也好，依然沒有很清晰的概念展父，基本就是照搬前人的代碼和使用方法了返劲。
問題背景是這樣的，之前 有寫到 一個(gè)彈窗栖茉，在setState的時(shí)候?qū)棿暗膙isible設(shè)置為true篮绿，之后在回調(diào)里 通過 refs來(lái)獲得這個(gè)彈窗元素，想象中是這樣的吕漂，然而真的 實(shí)現(xiàn)起來(lái)發(fā)現(xiàn)這樣是有問題的亲配，log出來(lái)的彈窗dom元素是undefind？這說(shuō)明 setState成功后惶凝，回調(diào)里并沒有立即渲染吼虎？interesting。苍鲜。思灰。接著 我去了解了一下 setState相關(guān)的東西。
first混滔，setState真的是異步么
答案是否定的洒疚，setState的同步異步取決于不同的調(diào)用場(chǎng)景。結(jié)論可以先說(shuō)坯屿，在經(jīng)過react包裝的一些環(huán)境里油湖，setState確實(shí)是異步執(zhí)行的，而在未經(jīng)過react包裝比如settimeout&&原生事件里setState是同步的领跛。我們可以大膽猜測(cè)肺魁，默認(rèn)的情況下，setState是同步的隔节，而在react里調(diào)用環(huán)境里鹅经，通過改變了一些數(shù)據(jù)，使得setState變成同步執(zhí)行怎诫。
setState通常的運(yùn)用場(chǎng)景：
1. 在生命周期里使用瘾晃，其中一般運(yùn)用較多的為componentDidMount，在這里setState以異步的方式執(zhí)行幻妓。
2. 在react包裝過的合成事件中執(zhí)行setState蹦误，執(zhí)行異步。
3.settimeout里調(diào)用setState肉津，setState同步執(zhí)行强胰。
4.原生事件中，即用 addEventListener或者是document.querySelector().onclick的方式妹沙，在這些事件回掉里使用setState也會(huì)同步執(zhí)行偶洋。
上文說(shuō)到，react有一些magic操作來(lái)決定了要不要異步執(zhí)行距糖，首先玄窝，要明確的是，setState異步執(zhí)行指的到底是什么悍引，我們通常遇到的setState是batch操作恩脂，即當(dāng)有一個(gè)setState被執(zhí)行時(shí)，內(nèi)部會(huì)創(chuàng)建一個(gè)待更新的隊(duì)列趣斤。每一次setState都是往隊(duì)列里推入新的東西俩块。而在原生事件或者settimeout里，setState是立即執(zhí)行浓领，并不再是批量更新了玉凯。（恍然大悟哦，所以異步指的就是batch操作镊逝，并不是真正的異步Ｗ嘲 ！）官方文檔是這樣介紹的：
將 nextState 淺合并到當(dāng)前 state撑蒜。這是在事件處理函數(shù)和服務(wù)器請(qǐng)求回調(diào)函數(shù)中觸發(fā) UI 更新的主要方法歹啼。不保證?setState?調(diào)用會(huì)同步執(zhí)行，考慮到性能問題座菠，可能會(huì)對(duì)多次調(diào)用作批處理狸眼。
setState被觸發(fā)后，直接被塞到隊(duì)列里等待更新還是 直接執(zhí)行更新 取決于一個(gè)參數(shù)浴滴，isBatchingUpdates拓萌，默認(rèn)的這個(gè)參數(shù)為false即不進(jìn)行batch更新，在react合成事件和生命周期函數(shù)里會(huì)調(diào)用一個(gè)batchedUpdates 函數(shù) 升略，將isBatchingUpdates修改為true微王。而在一些未經(jīng)react包裝過的事件處理中屡限，因?yàn)闋顟B(tài)值為false，就直接走了立即更新的操作炕倘。
然而 搞了半天 最初的困惑還是沒有解決钧大。。罩旋。啊央。。涨醋。算了 再開一篇吧
