ReactNative學習 --- 理論篇

盡管在移動開發(fā)中,原生App的開發(fā)成本很高,但現(xiàn)階段基于原生開發(fā)仍然是必須的,因為Web的用戶體驗仍無法超越Native,主要體現(xiàn)在:

  • Native的原生控件有更好的體驗;
  • Native有更好的手勢識別;
  • Native有更合適的線程模型,盡管Web Worker可以解決一部分問題,但如圖像解碼、文本渲染仍無法多線程渲染,這影響了Web的流暢性。

一、開篇

React Native于F8大會開源,在短短不到一年的時間里,它成為手機端必不可少的開發(fā)模式之一。 它充分利用了Facebook現(xiàn)有的業(yè)務輪子, 其核心設計理念:既擁有Native的用戶體驗、又保留React的開發(fā)效率。目前,React Native基本完成了對多端的支持,實現(xiàn)了真正意義上的面向配置開發(fā): 開發(fā)者可以靈活的使用HTML和CSS布局,使用React語法構(gòu)建組件,實現(xiàn):H5, Android, iOS 多端代碼的復用。此外,使用流暢度和原生的保持在同一層次,這不是我們夢寐以求的開發(fā)模式嗎?讓我們從無到有開啟新的學習篇章吧!

二、什么是React Native?

1.時下兩大移動互聯(lián)網(wǎng)主流技術(shù)

  • BAT等一線互聯(lián)網(wǎng)公司的插件化,熱修改等技術(shù)
  • React Native技術(shù)(2016年,隨著Android版本的穩(wěn)定,更加火爆)

2.React Native介紹

  • Facebook于2015年9月15日發(fā)布React Native
  • 廣大開發(fā)者可以使用JavaScript和React開發(fā)跨平臺移動應用React Native提倡組件化開發(fā): 即提供一個個封裝好的組件,組件相互嵌套形成新的組件

3.React Native的優(yōu)勢
3.1 跨平臺開發(fā)運用React Native,我們可以使用同一份業(yè)務邏輯核心代碼來創(chuàng)建原生應用運行在Web端,Android端和iOS端;
3.2 追求極致的用戶體驗:實時熱部署 3.3 learn once,write everywhere (最具魅力) React Native不強求一份原生代碼支持多個平臺,所以不提“Write once, run anywhere”(Java),提出了“Learn once, write anywhere”。

4.React Native開發(fā)注意事項
4.1 目前react native在iOS上僅支持ios7以上,Android僅支持Android4.1以上版本;
github地址
官網(wǎng)文檔
4.2 由于React Native的版本更新速度很快,如果沒有深厚的JavaScript基礎,建議選擇: a、功能適中,交互一般,不需要特別多的系統(tǒng)原生支持; b、對于部分復雜的應用,可以考慮原生+React Native混合開發(fā)

名詞釋義:

1.虛擬DOM(Virtual Document Object Model)
React為啥這么大?因為它實現(xiàn)了一個虛擬DOM(Virtual DOM)。虛擬DOM是干什么的?這就要從瀏覽器本身講起如我們所知,在瀏覽器渲染網(wǎng)頁的過程中,加載到HTML文檔后,會將文檔解析并構(gòu)建DOM樹,然后將其與解析CSS生成的CSSOM樹一起結(jié)合產(chǎn)生愛的結(jié)晶——RenderObject樹,然后將RenderObject樹渲染成頁面(當然中間可能會有一些優(yōu)化,比如RenderLayer樹)。這些過程都存在與渲染引擎之中,渲染引擎在瀏覽器中是于JavaScript引擎(JavaScriptCore也好V8也好)分離開的,但為了方便JS操作DOM結(jié)構(gòu),渲染引擎會暴露一些接口供JavaScript調(diào)用。由于這兩塊相互分離,通信是需要付出代價的,因此JavaScript調(diào)用DOM提供的接口性能不咋地。各種性能優(yōu)化的最佳實踐也都在盡可能的減少DOM操作次數(shù)。
而虛擬DOM干了什么?它直接用JavaScript實現(xiàn)了DOM樹(大致上)。組件的HTML結(jié)構(gòu)并不會直接生成DOM,而是映射生成虛擬的JavaScript DOM結(jié)構(gòu),React又通過在這個虛擬DOM上實現(xiàn)了一個 diff 算法找出最小變更,再把這些變更寫入實際的DOM中。這個虛擬DOM以JS結(jié)構(gòu)的形式存在,計算性能會比較好,而且由于減少了實際DOM操作次數(shù),性能會有較大提升

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 盡管在移動開發(fā)中,原生App的開發(fā)成本很高,但現(xiàn)階段基于原生開發(fā)仍然是必須的,因為Web的用戶體驗仍無法超越Nat...
    橫爬介士閱讀 340評論 0 0
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,108評論 25 709
  • ReactNative學習資料 標簽(空格分隔): React 原文地址:React-Native學習指南 Rea...
    袁俊亮技術(shù)博客閱讀 1,126評論 1 5
  • 歌曲<<再見理想>> 春情不斷若連環(huán),一夕思歸鬢欲斑。 壯志未酬三尺劍,故鄉(xiāng)空隔萬重山。 音書斷絕干戈后,親友相逢...
    老蔣689閱讀 720評論 3 30
  • 心理學偏差之確認偏差,人送外號偏差之父!~\(≧≦)/~啦啦啦我們來看看這是在心理學效應里面多么牛的一個角色! 先...
    HincL閱讀 1,310評論 0 0

友情鏈接更多精彩內(nèi)容