好程序員Web前端教程之React原理解析及優(yōu)化技巧

好程序員Web前端教程之React原理解析及優(yōu)化技巧，React既是當(dāng)前企業(yè)選拔人才的主要技能之一，也是每一個(gè)Web前端人才需要掌握的知識(shí)。有不少同學(xué)想要快速掌握React，接下來就給大家簡(jiǎn)單介紹React原理以及相關(guān)性能優(yōu)化技巧。

點(diǎn)擊添加圖片描述（最多60個(gè)字） 編輯

ReactJS起源于Facebook內(nèi)部項(xiàng)目，是一個(gè)用來構(gòu)建用戶界面的JavaScript庫，相當(dāng)于MVC架構(gòu)中的V層框架。與市面上其他框架不同的是，React把每一個(gè)組件當(dāng)成了一個(gè)狀態(tài)機(jī)，組件內(nèi)部通過state來維護(hù)組件狀態(tài)的變化，當(dāng)組件的狀態(tài)發(fā)生變化時(shí)，React通過虛擬DOM技術(shù)來增量并且高效的更新真實(shí)DOM。

React核心技術(shù)——虛擬DOM(Virtual DOM)：對(duì)于每一個(gè)組件，React會(huì)在內(nèi)存中構(gòu)建一個(gè)相對(duì)應(yīng)的DOM樹，基于React開發(fā)時(shí)所有的DOM構(gòu)造都是通過虛擬DOM進(jìn)行，每當(dāng)組件的狀態(tài)發(fā)生變化時(shí)，React都會(huì)重新構(gòu)建整個(gè)DOM數(shù)據(jù)，然后將當(dāng)前的整個(gè)DOM樹和上一次的DOM樹進(jìn)行對(duì)比，得出DOM結(jié)構(gòu)變化的部分(Patchs)，然后將這些Patchs再更新到真實(shí)DOM中。整個(gè)過程都是在內(nèi)存中進(jìn)行，因此是非常高效的。

React把每個(gè)組件都當(dāng)作一個(gè)狀態(tài)機(jī)來維護(hù)和管理，因此每個(gè)組件都擁有一套完整的生命周期，大致可以分為三個(gè)過程：初始化、更新和銷毀。生命周期的每一個(gè)過程都明確的反映了組件的狀態(tài)變化，對(duì)于開發(fā)來說就能很容易的把握組件的每個(gè)狀態(tài)，不同的狀態(tài)時(shí)期做對(duì)應(yīng)的事情，互不干擾。

React性能優(yōu)化技巧

由于React中性能主要耗費(fèi)在于update階段的diff算法，因此性能優(yōu)化也主要針對(duì)diff算法。

1、減少diff算法觸發(fā)次數(shù)。減少diff算法觸發(fā)次數(shù)實(shí)際上就是減少update流程的次數(shù)，正常進(jìn)入update流程有三種方式：setState、父組件render、forceUpdate。

2、shouldComponentUpdate。使用shouldComponentUpdate鉤子，根據(jù)具體的業(yè)務(wù)狀態(tài)，減少不必要的props變化導(dǎo)致的渲染。如一個(gè)不用于渲染的props導(dǎo)致的update。另外，也要盡量避免在shouldComponentUpdate 中做一些比較復(fù)雜的操作， 比如超大數(shù)據(jù)的pick操作等。

如果你想了解更多React知識(shí)點(diǎn)，可以關(guān)注“好程序員”微信公眾號(hào)，定期發(fā)布技術(shù)熱點(diǎn)和求職指南。你也可以來好程序員Web前端培訓(xùn)班進(jìn)行系統(tǒng)的學(xué)習(xí)進(jìn)階，跟隨大牛講師快速、高效的學(xué)習(xí)提升。