資訊專欄INFORMATION COLUMN
摘要：目前開發的項目中為了仿原生效果如果自己去通過重新實現的話成本極大所以不得不使用來作為前端庫。可以在這個函數中清理在綁定的事件這個方式很有用。在開發過程中這些生命周期函數是我使用最頻繁最常見的操作。
一.項目所用的各種框架ReactJS作為目前最火的構建用戶界面的前端框架，為什么有那么多的前端工程師去追逐它，不僅因為它簡單，而且它提供了一系列強大的API讓我們擺脫以前繁瑣的DOM操作，使我們的邏輯更加清晰，代碼更加簡單。
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 是一個 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/archi...
作者簡介：前端新人，現任MaxLeap UX團隊成員,主要從事于react開發,一直對hybrid混合app感興趣。
相關文章
webpack 入門
關于我們
MaxLeap 為App開發、運營提供一站式后端云服務， 包括應用開發所需的后端云數據庫、云數據源、云代碼、云容器、 IM、移動支付、應用內社交、第三方登錄、社交分享等基礎服務，以及針對應用運營的數據分析、推送營銷，用戶支持等服務， 覆蓋移動應用的研發、運營完整生命周期，致力于讓移動應用開發運營更快速簡單。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90836.html
摘要：前言在應用開發中，列表是我們使用頻率非常高的一種展現形式，在項目中更是如此。無處不在的使用更是需要我們小心觸發性能瓶頸的深水炸彈。不要用索引當值要求我們對列表中的每一項設置一個唯一的值，這個虛擬的算法有很大關系。 前言 在應用開發中，列表是我們使用頻率非常高的一種展現形式，在reactjs項目中更是如此。無處不在的使用更是需要我們小心觸發性能瓶頸的深水炸彈。 下面就我最近的總結出的幾點...
摘要：文章圖片存儲在，網速不佳的朋友，請看使用心得加速雙刃劍或者來我的技術小站本文以騰訊云平臺的服務為例，記錄下在個人網站開發和公司項目實戰中的對使用的心得便宜沒好貨。此時，更應該使用來提速。 文章圖片存儲在GitHub，網速不佳的朋友，請看《CDN 使用心得：加速雙刃劍》 或者 來我的技術小站 godbmw.com 本文以騰訊云平臺的 CDN 服務為例，記錄下在個人網站開發和公司項目實戰中...
摘要：文章圖片存儲在，網速不佳的朋友，請看使用心得加速雙刃劍或者來我的技術小站本文以騰訊云平臺的服務為例，記錄下在個人網站開發和公司項目實戰中的對使用的心得便宜沒好貨。此時，更應該使用來提速。 文章圖片存儲在GitHub，網速不佳的朋友，請看《CDN 使用心得：加速雙刃劍》 或者 來我的技術小站 godbmw.com 本文以騰訊云平臺的 CDN 服務為例，記錄下在個人網站開發和公司項目實戰中...
摘要：目前只是體會到組件之間傳遞的值的初始來源一般都是值，可能是實踐不夠的原因。。。此時，可以建一個組件內部封裝一個構造函數，內部封裝三個方法。 PS：開頭的一段廢話 ???????想起一個月前還不知道reactjs該如何下手的而今天有點小體會，還是有點小欣慰，不過回望一些走過的坑和開始時的滿頭漿糊覺得還是有點恐怖的。今天分享一點實踐中的小心得給新手朋友們。 reactjs的es6語法形式 ...
閱讀 550·2021-11-25 09:44
閱讀 2636·2021-11-24 09:39
閱讀 2305·2021-11-22 15:29
閱讀 3520·2021-11-15 11:37
閱讀 3379·2021-09-24 10:36
閱讀 2507·2021-09-04 16:41
閱讀 992·2021-09-03 10:28
閱讀 1833·2019-08-30 15:55
