前端知識|淺談ReactsetState
setState的連鎖反應(yīng)
我們一直強調(diào)成都網(wǎng)站建設(shè)、成都做網(wǎng)站對于企業(yè)的重要性,如果您也覺得重要,那么就需要我們慎重對待,選擇一個安全靠譜的網(wǎng)站建設(shè)公司,企業(yè)網(wǎng)站我們建議是要么不做，要么就做好,讓網(wǎng)站能真正成為企業(yè)發(fā)展過程中的有力推手。專業(yè)網(wǎng)站制作公司不一定是大公司,成都創(chuàng)新互聯(lián)公司作為專業(yè)的網(wǎng)絡(luò)公司選擇我們就是放心。
這是一個React組件實現(xiàn)組件可交互所需的流程，render()輸出虛擬DOM，虛擬DOM轉(zhuǎn)為DOM，再在DOM上注冊事件，事件觸發(fā)setState()修改數(shù)據(jù)，在每次調(diào)用setState方法時，React會自動執(zhí)行render方法來更新虛擬DOM，如果組件已經(jīng)被渲染，那么還會更新DOM中去。這個過程，setState就像一個點燃引擎的火源，發(fā)動了React核心的調(diào)度層，然后直至渲染層的改變。
異步的setState
剛接觸React的同學(xué)，對React的setState的使用偶爾會有一些偏頗，出現(xiàn)一些意料之外的情況。例如：
onFunction=()=>{
this.setState({value: []});
// 此刻立馬取this.state做一些同步操作
console.log(this.state.value);
所以經(jīng)常犯這個錯的同學(xué)需要謹(jǐn)記下面這幾點：
- setState是異步的，不會立即改變state的值。
- 多次setState調(diào)用生成的效果會合并。
- 第二個參數(shù)可以是一個回調(diào)函數(shù)。
- setState可以接受一個函數(shù)
為什么要異步呢？
每一次setState如果都引發(fā)一次組件更新，走完一圈生命周期，實在是有點粗糙和浪費，生命周期函數(shù)為純函數(shù)性能應(yīng)當(dāng)還能夠接受，可是render函數(shù)內(nèi)返回的虛擬DOM去做比較這個就比較費時間了。
直觀的感受是，React將多個setState產(chǎn)生的修改放在一個隊列里，緩一緩，攢在一起，等待時機(jī)，覺得差不多了再引發(fā)一次更新過程。這樣，在每次更新過程中，會把積攢的setState結(jié)果合并，做一個merge的動作，節(jié)省render觸發(fā)的頻率。
這樣，對于開發(fā)者而言，可以在同步代碼中隨意多行調(diào)用setState函數(shù)而不用擔(dān)心重復(fù)setState重復(fù)render的問題。
然后，總是被大家誤用不理解的也是這一點，所以后來，setState方法的第二個參數(shù)慢慢被進(jìn)入大家的視野了，作為回調(diào)函數(shù)可以再次拿到新的this.state值。
再后來，一個setState函數(shù)的隱藏功能進(jìn)入了大家的視野，那就是setState可以接受一個函數(shù)作為參數(shù)。
this.setState(function (state, props) {
return {
value: state.value - 1
}
});
新聞標(biāo)題：前端知識|淺談ReactsetState
當(dāng)前URL：http://m.jiaotiyi.com/article/jjhpip.html