前端知識(shí) |淺談React setState

setState的連鎖反應(yīng)

這是一個(gè)React組件實(shí)現(xiàn)組件可交互所需的流程，render()輸出虛擬DOM，虛擬DOM轉(zhuǎn)為DOM，再在DOM上注冊(cè)事件，事件觸發(fā)setState()修改數(shù)據(jù)，在每次調(diào)用setState方法時(shí)，React會(huì)自動(dòng)執(zhí)行render方法來(lái)更新虛擬DOM，如果組件已經(jīng)被渲染，那么還會(huì)更新DOM中去。這個(gè)過(guò)程，setState就像一個(gè)點(diǎn)燃引擎的火源，發(fā)動(dòng)了React核心的調(diào)度層，然后直至渲染層的改變。
異步的setState
剛接觸React的同學(xué)，對(duì)React的setState的使用偶爾會(huì)有一些偏頗，出現(xiàn)一些意料之外的情況。例如：
onFunction=()=>{
this.setState({value: []});
// 此刻立馬取this.state做一些同步操作
console.log(this.state.value);

所以經(jīng)常犯這個(gè)錯(cuò)的同學(xué)需要謹(jǐn)記下面這幾點(diǎn)：

1. setState是異步的，不會(huì)立即改變state的值。
2. 多次setState調(diào)用生成的效果會(huì)合并。
3. 第二個(gè)參數(shù)可以是一個(gè)回調(diào)函數(shù)。
4. setState可以接受一個(gè)函數(shù)
   為什么要異步呢？
   
   每一次setState如果都引發(fā)一次組件更新，走完一圈生命周期，實(shí)在是有點(diǎn)粗糙和浪費(fèi)，生命周期函數(shù)為純函數(shù)性能應(yīng)當(dāng)還能夠接受，可是render函數(shù)內(nèi)返回的虛擬DOM去做比較這個(gè)就比較費(fèi)時(shí)間了。
   直觀的感受是，React將多個(gè)setState產(chǎn)生的修改放在一個(gè)隊(duì)列里，緩一緩，攢在一起，等待時(shí)機(jī)，覺(jué)得差不多了再引發(fā)一次更新過(guò)程。這樣，在每次更新過(guò)程中，會(huì)把積攢的setState結(jié)果合并，做一個(gè)merge的動(dòng)作，節(jié)省render觸發(fā)的頻率。
   這樣，對(duì)于開發(fā)者而言，可以在同步代碼中隨意多行調(diào)用setState函數(shù)而不用擔(dān)心重復(fù)setState重復(fù)render的問(wèn)題。
   然后，總是被大家誤用不理解的也是這一點(diǎn)，所以后來(lái)，setState方法的第二個(gè)參數(shù)慢慢被進(jìn)入大家的視野了，作為回調(diào)函數(shù)可以再次拿到新的this.state值。
   再后來(lái)，一個(gè)setState函數(shù)的隱藏功能進(jìn)入了大家的視野，那就是setState可以接受一個(gè)函數(shù)作為參數(shù)。
   this.setState(function (state, props) {
   return {
   value: state.value - 1
   }
   });