好程式設計師Web前端教程之React原理解析及最佳化技巧

好程式設計師Web前端教程之React原理解析及最佳化技巧，React既是當前企業選拔人才的主要技能之一，也是每一個Web前端人才需要掌握的知識。有不少同學想要快速掌握React，接下來就給大家簡單介紹React原理以及相關效能最佳化技巧。

ReactJS起源於Facebook內部專案，是一個用來構建使用者介面的JavaScript庫，相當於MVC架構中的V層框架。與市面上其他框架不同的是，React把每一個元件當成了一個狀態機，元件內部透過state來維護元件狀態的變化，當元件的狀態發生變化時，React透過虛擬DOM技術來增量並且高效的更新真實DOM。

React核心技術——虛擬DOM(Virtual DOM)：對於每一個元件，React會在記憶體中構建一個相對應的DOM樹，基於React開發時所有的DOM構造都是透過虛擬DOM進行，每當元件的狀態發生變化時，React都會重新構建整個DOM資料，然後將當前的整個DOM樹和上一次的DOM樹進行對比，得出DOM結構變化的部分(Patchs)，然後將這些Patchs再更新到真實DOM中。整個過程都是在記憶體中進行，因此是非常高效的。

React把每個元件都當作一個狀態機來維護和管理，因此每個元件都擁有一套完整的生命週期，大致可以分為三個過程：初始化、更新和銷燬。生命週期的每一個過程都明確的反映了元件的狀態變化，對於開發來說就能很容易的把握元件的每個狀態，不同的狀態時期做對應的事情，互不干擾。

React效能最佳化技巧

由於React中效能主要耗費在於update階段的diff演算法，因此效能最佳化也主要針對diff演算法。

1、減少diff演算法觸發次數。減少diff演算法觸發次數實際上就是減少update流程的次數，正常進入update流程有三種方式：setState、父元件render、forceUpdate。

2、shouldComponentUpdate。使用shouldComponentUpdate鉤子，根據具體的業務狀態，減少不必要的props變化導致的渲染。如一個不用於渲染的props導致的update。另外，也要儘量避免在shouldComponentUpdate 中做一些比較複雜的操作， 比如超大資料的pick操作等。

如果你想了解更多React知識點，可以關注“好程式設計師”微信公眾號，定期釋出技術熱點和求職指南。你也可以來好程式設計師Web前端培訓班進行系統的學習進階，跟隨大牛講師快速、高效的學習提升。