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

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中去判斷把已經初始化的函數進行清理,避免形成屢次初始化。

unmount

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感興趣。