盡管在移動開發(fā)中,原生App的開發(fā)成本很高谦趣,但現(xiàn)階段基于原生開發(fā)仍然是必須的疲吸,因為Web的用戶體驗仍無法超越Native,主要體現(xiàn)在:
- Native的原生控件有更好的體驗前鹅;
- Native有更好的手勢識別摘悴;
- Native有更合適的線程模型,盡管Web Worker可以解決一部分問題舰绘,但如圖像解碼蹂喻、文本渲染仍無法多線程渲染葱椭,這影響了Web的流暢性。
一口四、開篇
React Native于F8大會開源,在短短不到一年的時間里,它成為手機(jī)端必不可少的開發(fā)模式之一孵运。 它充分利用了Facebook現(xiàn)有的業(yè)務(wù)輪子, 其核心設(shè)計理念:既擁有Native的用戶體驗、又保留React的開發(fā)效率蔓彩。目前治笨,React Native基本完成了對多端的支持,實現(xiàn)了真正意義上的面向配置開發(fā): 開發(fā)者可以靈活的使用HTML和CSS布局,使用React語法構(gòu)建組件,實現(xiàn):H5, Android, iOS 多端代碼的復(fù)用赤嚼。此外旷赖,使用流暢度和原生的保持在同一層次,這不是我們夢寐以求的開發(fā)模式嗎?讓我們從無到有開啟新的學(xué)習(xí)篇章吧!
二、什么是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ā)跨平臺移動應(yīng)用React Native提倡組件化開發(fā): 即提供一個個封裝好的組件流济,組件相互嵌套形成新的組件
3.React Native的優(yōu)勢
3.1 跨平臺開發(fā)運用React Native,我們可以使用同一份業(yè)務(wù)邏輯核心代碼來創(chuàng)建原生應(yīng)用運行在Web端,Android端和iOS端腌闯;
3.2 追求極致的用戶體驗:實時熱部署 3.3 learn once,write everywhere (最具魅力) React Native不強(qiáng)求一份原生代碼支持多個平臺绳瘟,所以不提“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基礎(chǔ)蘸泻,建議選擇: a、功能適中嘲玫,交互一般悦施,不需要特別多的系統(tǒng)原生支持; b去团、對于部分復(fù)雜的應(yīng)用抡诞,可以考慮原生+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樹渲染成頁面(當(dāng)然中間可能會有一些優(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ù)藐窄,性能會有較大提升