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

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

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

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

因?yàn)槲覀冎恍枰猣ramework7提供的UI樣式,而并不需要它那一堆操作DOM的API,對(duì)于沒有接觸過ReactJS的新同學(xué)來說,思維肯定難以轉(zhuǎn)變,可以直接操作DOM那肯定比較爽,react通過state直接更改界面樣式的一邊玩去吧！所以造成開始進(jìn)入這項(xiàng)目時(shí),我也是直接操作DOM,所以造成前期代碼紊亂,后期維護(hù)困難。中途過程中,對(duì)于framework7沒有的dom操作API,我又引入的Jquery和各種類庫。

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

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

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

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

下面談?wù)勎覍?duì)React上面兩個(gè)思想的理解:

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

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

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

1.componentDidMount

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

2.componentWillMount

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

3.componentWillUnmount

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

4.componentWillUpdate

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

5.componentDidUpdate

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

需要實(shí)現(xiàn)一個(gè)一元奪寶模塊,導(dǎo)航欄下有一個(gè)tab欄顯示一元奪寶共進(jìn)行了多少期,當(dāng)前期數(shù)默認(rèn)第一個(gè)tab顯示(可滑動(dòng))。如下圖:

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

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

6.shouldComponentUpdate

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

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

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

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

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

相關(guān)文章
webpack 入門

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