ReactJS作為目前最火的構建用戶界面的前端框架，為什麽有那麽多的前端工程師去追逐它，不僅因為它簡單，而且它提供了一系列強大的API讓我們擺脫以前繁瑣的DOM操作，使我們的邏輯更加清晰，代碼更加簡單。

一.項目所用的各種框架

在我目前開發的項目中,前端UI框架使用的是framework7,ReactJS用來構建用戶界面,reflux用來操作數據(主要負責數據請求和數據操作)。

Framework7不僅提供了UI界面,而且還封裝了一堆類似jQuery的DOM操作API,而ReactJS是facebook工程師開發的構建用戶界面的前端類庫,提供了強大的diff算法,在內存中直接操作虛擬DOM，所以Framework7和ReactJS結合,有點不倫不類。

因為我們只需要framework7提供的UI樣式,而並不需要它那一堆操作DOM的API,對於沒有接觸過ReactJS的新同學來說,思維肯定難以轉變,可以直接操作DOM那肯定比較爽,react通過state直接更改界面樣式的一邊玩去吧！所以造成開始進入這項目時,我也是直接操作DOM,所以造成前期代碼紊亂,後期維護困難。中途過程中,對於framework7沒有的dom操作API,我又引入的Jquery和各種類庫。

而且由於我們項目使用的是spa模式,所以造成後期通過webpack打包的bundle.js多達4M,在低端android機上,加載時間長達幾十秒。其實使用react開發的項目完全沒必要再引入操作DOM的前端框架,react操作虛擬DOM的性能和速度完全不是直接操作DOM可比的。那樣只會造成的應用的卡頓和加載緩慢。

目前開發的項目中為了仿原生ios效果(如果自己去通過React重新實現的話,成本極大),所以不得不使用Framedmework7來作為前端UI庫。

二.ReactJS簡單的介紹

什麽是React?下面是來自React中文文檔的說明:

React 是一個 Facebook 和 Instagram 用來創建用戶界面的 JavaScript 庫。

很多人認為 React 是 MVC 中的 V（視圖）。

我們創造 React 是為了解決一個問題：構建隨著時間數據不斷變化的大規模應用程序。為了達到這個目標，React 采用下面兩個主要的思想。

1:僅僅只要表達出你的應用程序在任一個時間點應該長的樣子，然後當底層的數據變了，React 會自動處理所有用戶界面的更新

2:數據變化後，React 概念上與點擊“刷新”按鈕類似，但僅會更新變化的部分。

下面談談我對React上面兩個思想的理解:

1.React有著極其強大的API,當數據源發生改變,都會觸發Render,這也就意味著你只需要關註數據整體,其他的一切React這個框架會去完成,降低了開發的難度和邏輯的復雜程度。

2.當數據源改變之後,React會在內存中通過diff算法,去比較數據源是否發生更改,在去決定是否更改DOM。因為React有一個非常強大的虛擬DOM系統,所以會在內存中去完成對DOM的所有操作,隨後在通過Render函數把對DOM的修改反應到實際DOM中。

許多人一聽,React那麽強大,是不是很難？其實非也,React中API少的可憐,非常簡單易懂,最常用的也就幾個生命周期函數和Render。

三.React中的生命周期

1.componentDidMount

組件已經加載到DOM中會執行這個函數,在這個函數中可以初始化一些將要執行的函數,在React生命周期中只會執行一次。在開發中,在該函數中執行的setState，在隨後通過this.state並不能夠馬上拿到,可以通過定時來獲取。

2.componentWillMount

在組件將要掛載到DOM中執行,這個函數我基本上很少用到。初始化工作我基本上在constructor和componentDidMount中去完成。

3.componentWillUnmount

組件從DOM中移除會執行這個函數,在此可以清理無用的DOM和事件。

4.componentWillUpdate

組件將要更新執行。可以在這個函數中清理在componentDidUpdate綁定的事件(這個方式很有用)。

5.componentDidUpdate

組件已經更新執行這個操作。可以在這個函數中初始化需要state中的數據源作為參數的函數。為了防止初始化多次,可以在componentWillUpdate中清理。看下面這個需求:

需要實現一個一元奪寶模塊,導航欄下有一個tab欄顯示一元奪寶共進行了多少期,當前期數默認第一個tab顯示(可滑動)。如下圖:

這個使用的是swiper.js來實現的。只能在從服務器獲取到期數後實現,所以我們在compoenntDidUpdate中去初始化:

但是我們同時可能又會去獲取購物車數量等等進行其他更新state的操作,根據React的生命周期,只要state發生改變,就有可能(shouldComponentUpdate返回true)會去執行componentDidUpdate。這樣就會造成這個函數的多次初始化。所以我們必須在componentWillUpdate中去判斷把已經初始化的函數進行清理,避免造成多次初始化。

6.shouldComponentUpdate

這個函數提供給我們這些開發者是否允許數據源發生改變後去執行Render的控制權。默認這個函數始終返回true。返回false的話,render函數不會執行,componentWillUpdate和componentDidUpdate也不會執行。可以在這個函數中去執行邏輯判斷,是否有必要去執行Render。為了追求更高的性能。可以手動去控制是否執行Render。

在開發過程中這些生命周期函數是我使用最頻繁最常見的React操作。

學習React,只要掌握我們只關心數據源,並進行setState,去更新state觸發Render就ok了。到此為止，React中的生命周期大致記錄到這,以備忘記,進行復習只用。

React入門並不難,但是深入.....

作者信息
原文作者系力譜宿雲 LeapCloud 團隊_UX成員：zhiyingzzhou 【原創】
首發地址：https://blog.maxleap.cn/archives/1033
作者簡介：前端新人，現任MaxLeap UX團隊成員,主要從事於react開發,一直對hybrid混合app感興趣。

ReactJS 開發過程中的一些使用心得