摘要：目前開發(fā)的項目中為了仿原生效果如果自己去通過重新實現(xiàn)的話成本極大所以不得不使用來作為前端庫?？梢栽谶@個函數(shù)中清理在綁定的事件這個方式很有用。在開發(fā)過程中這些生命周期函數(shù)是我使用最頻繁最常見的操作。

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

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

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

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

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

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

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

React 是一個 Facebook 和 Instagram 用來創(chuàng)建用戶界面的 JavaScript 庫。
很多人認為 React 是 MVC 中的 V（視圖）。
我們創(chuàng)造 React 是為了解決一個問題：構建隨著時間數(shù)據(jù)不斷變化的大規(guī)模應用程序。為了達到這個目標，React 采用下面兩個主要的思想。
1:僅僅只要表達出你的應用程序在任一個時間點應該長的樣子，然后當?shù)讓拥臄?shù)據(jù)變了，React 會自動處理所有用戶界面的更新
2:數(shù)據(jù)變化后，React 概念上與點擊“刷新”按鈕類似，但僅會更新變化的部分。

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

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

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

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

1.componentDidMount

組件已經(jīng)加載到DOM中會執(zhí)行這個函數(shù),在這個函數(shù)中可以初始化一些將要執(zhí)行的函數(shù),在React生命周期中只會執(zhí)行一次。在開發(fā)中,在該函數(shù)中執(zhí)行的setState，在隨后通過this.state并不能夠馬上拿到,可以通過定時來獲取。

2.componentWillMount

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

3.componentWillUnmount

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

4.componentWillUpdate

組件將要更新執(zhí)行?？梢栽谶@個函數(shù)中清理在componentDidUpdate綁定的事件(這個方式很有用)。

5.componentDidUpdate

組件已經(jīng)更新執(zhí)行這個操作?？梢栽谶@個函數(shù)中初始化需要state中的數(shù)據(jù)源作為參數(shù)的函數(shù)。為了防止初始化多次,可以在componentWillUpdate中清理?？聪旅孢@個需求:

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

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

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

6.shouldComponentUpdate

這個函數(shù)提供給我們這些開發(fā)者是否允許數(shù)據(jù)源發(fā)生改變后去執(zhí)行Render的控制權。默認這個函數(shù)始終返回true。返回false的話,render函數(shù)不會執(zhí)行,componentWillUpdate和componentDidUpdate也不會執(zhí)行。可以在這個函數(shù)中去執(zhí)行邏輯判斷,是否有必要去執(zhí)行Render。為了追求更高的性能?？梢允謩尤タ刂剖欠駡?zhí)行Render。

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

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

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

作者信息
原文作者系力譜宿云 LeapCloud 團隊_UX成員：zhiyingzzhou 【原創(chuàng)】
首發(fā)地址：https://blog.maxleap.cn/archi...
作者簡介：前端新人，現(xiàn)任MaxLeap UX團隊成員,主要從事于react開發(fā),一直對hybrid混合app感興趣。

相關文章
webpack 入門

關于我們
MaxLeap 為App開發(fā)、運營提供一站式后端云服務， 包括應用開發(fā)所需的后端云數(shù)據(jù)庫、云數(shù)據(jù)源、云代碼、云容器、 IM、移動支付、應用內社交、第三方登錄、社交分享等基礎服務，以及針對應用運營的數(shù)據(jù)分析、推送營銷，用戶支持等服務， 覆蓋移動應用的研發(fā)、運營完整生命周期，致力于讓移動應用開發(fā)運營更快速簡單。