優(yōu)秀的Web前端課程反應(yīng)原理的分析和優(yōu)化技能。 目前，React不僅是企業(yè)選拔人才的主要技能之一，還是每個(gè)Web前端人才都需要掌握的知識(shí)。 有很多學(xué)生想要快速反應(yīng)。 在下一門面向優(yōu)秀程序員的Web前端學(xué)習(xí)高級(jí)課程中，我將向您簡(jiǎn)要介紹React原理和相關(guān)的性能優(yōu)化技巧。

反應(yīng)JS起源于Facebook內(nèi)部項(xiàng)目。 它是一個(gè)用于構(gòu)建用戶界面的JavaScript庫(kù)，等效于MVC架構(gòu)中的v層框架。 與市場(chǎng)上的其他框架不同，React將每個(gè)組件視為狀態(tài)機(jī)，并通過(guò)組件內(nèi)的狀態(tài)保持組件狀態(tài)的變化。 當(dāng)組件的狀態(tài)發(fā)生變化時(shí)，React通過(guò)虛擬DOM技術(shù)來(lái)增量和有效地更新實(shí)際DOM。

react核心技術(shù)虛擬DOM（虛擬DOM）：對(duì)于每個(gè)組件，react都會(huì)在內(nèi)存中構(gòu)建相應(yīng)的DOM樹(shù)。 在基于反應(yīng)的開(kāi)發(fā)過(guò)程中，所有DOM的構(gòu)建都是通過(guò)虛擬dom進(jìn)行的。 只要組件的狀態(tài)發(fā)生變化，react就會(huì)重建整個(gè)DOM數(shù)據(jù)，然后將當(dāng)前的整個(gè)DOM樹(shù)與最后一個(gè)DOM樹(shù)進(jìn)行比較，以獲取DOM結(jié)構(gòu)（路徑）的變化。 然后，將這些補(bǔ)丁更新為真實(shí)域名。 整個(gè)過(guò)程都在內(nèi)存中，因此非常高效。

react將每個(gè)組件作為狀態(tài)機(jī)進(jìn)行維護(hù)和管理，因此每個(gè)組件都有完整的生命周期，可以將其大致分為三個(gè)過(guò)程：初始化，更新和銷毀。 生命周期的每個(gè)過(guò)程都清楚地反映了組件的狀態(tài)變化。 對(duì)于開(kāi)發(fā)而言，很容易掌握組件的每個(gè)狀態(tài)，并且可以在不同狀態(tài)周期內(nèi)做相應(yīng)的事情而不會(huì)受到干擾。

反應(yīng)性能優(yōu)化技巧

因?yàn)樵诟�新階段反應(yīng)的主要性能成本是diff算法，所以性能優(yōu)化也主要針對(duì)diff算法。

1。 減少diff算法觸發(fā)器的數(shù)量。 減少diff算法的觸發(fā)時(shí)間實(shí)際上是在減少更新過(guò)程的時(shí)間。 可以通過(guò)三種方式正常進(jìn)入更新過(guò)程：setstate，父組件渲染和forceupdate。

2，shouldComponentUpdate。使用shouldcomponentupdate掛鉤可以減少因特定業(yè)務(wù)狀況而導(dǎo)致不必要的道具更改而引起的渲染。 例如由不用于渲染的道具引起的更新。 另外，我們應(yīng)該盡量避免在shouldcomponentupdate中進(jìn)行一些更復(fù)雜的操作，例如過(guò)大的數(shù)據(jù)的選擇操作。 如果您想了解更多有關(guān)反應(yīng)的知識(shí)，可以關(guān)注我并定期發(fā)布技術(shù)熱點(diǎn)和工作指南。 您還可以參加針對(duì)優(yōu)秀程序員的Web前端培訓(xùn)課程，以進(jìn)行系統(tǒng)的學(xué)習(xí)和升級(jí)，并跟隨Daniel的講師進(jìn)行快速高效的學(xué)習(xí)。