內(nèi)容來源：2017年3月11日送挑，滬江web前端開發(fā)工程師陳達(dá)孚在“中生代技術(shù)&iTechPlus年度大會(huì)（上海）”進(jìn)行《基于react native三端融合的應(yīng)用和實(shí)踐》演講分享屯远。IT大咖說（ID：itdakashuo）作為獨(dú)家視頻合作方，經(jīng)主辦方和講者審閱授權(quán)發(fā)布颤绕。
閱讀字?jǐn)?shù)：1979?| 3分鐘閱讀
嘉賓演講視頻回顧及PPT幸海，請點(diǎn)擊：http://t.cn/Rgtmbe9
摘要
ReactNative給前端提供了一套兩端共用代碼和快速實(shí)現(xiàn)熱更新的框架祟身，但在實(shí)際落地中，需要進(jìn)行大量的保障工作和優(yōu)化工作來讓業(yè)務(wù)能夠平穩(wěn)上線物独，另一方面袜硫，部分頁面有著三端實(shí)現(xiàn)的需求，需要一套方案能夠快速讓React Native代碼在web端實(shí)現(xiàn)復(fù)用挡篓，本次分享基于滬江大前端團(tuán)隊(duì)在React Native在三端融合過程中的橫向工作中獲得的經(jīng)驗(yàn)和總結(jié)婉陷。
為什么選擇React Native？
React Native的優(yōu)勢
ReactNative天生就提供了兩端共享的一套業(yè)務(wù)代碼官研。
具有接近原生的性能秽澳。
社區(qū)活躍，很多團(tuán)隊(duì)都選擇React Native作為解決方案戏羽。
React Native的劣勢
Learnonce write anywhere担神。
部分組件性能不好。
會(huì)產(chǎn)生一些早期開發(fā)成本和融合開發(fā)成本始花。
滬江應(yīng)用現(xiàn)狀
滬江應(yīng)用現(xiàn)在大部分是三端獨(dú)立完成的妄讯，整體的復(fù)用率很低。
通過Web容器接入在線頁面來實(shí)現(xiàn)多端復(fù)用的需求酷宵。
問題-原生
原生最大的優(yōu)勢就是它的體驗(yàn)非常好亥贸。
它的缺點(diǎn)也很明顯，一旦有需求要頻繁發(fā)版忧吟，android和iOS需要維護(hù)兩套代碼砌函，整體代碼的復(fù)用率會(huì)很低。
問題-在線頁面
業(yè)務(wù)方需要寫大量兼容代碼進(jìn)行判斷溜族。比如在hybrid里需要調(diào)用容器暴露的方法讹俊，在H5里要調(diào)用原生的方法。
體驗(yàn)性相較于原生來說要差很多煌抒。
使用在線頁面經(jīng)常會(huì)有運(yùn)營方劫持CDN的問題仍劈，遇到網(wǎng)絡(luò)問題展示不出代碼，令大家非常頭疼寡壮。
三端融合
三端融合就是希望一套代碼可以三端復(fù)用贩疙。但從我們的角度來講，并不是所有頁面都需要做三端融合况既，我們會(huì)通過一些限定來控制頁面的復(fù)雜度这溅。
思路與方案
我們考慮使用React Web組件，底層配合React棒仍。
第二種方案是直接用Bable從React Native代碼直接編譯到React的代碼悲靴。
還有一種方案就是我們提供一套完整的Web框架，去完成從React Native代碼到瀏覽器上的展現(xiàn)莫其，都通過一套框架去實(shí)現(xiàn)癞尚。
React Web組件+React
如果使用React Web組件+React耸三，初次開發(fā)的成本比較低。
ReactWeb的組件非常復(fù)雜浇揩，在開發(fā)每一個(gè)組件和API的時(shí)候成本還是比較高的仪壮，也會(huì)造成組件代碼冗余。
API不確定胳徽，隱藏的風(fēng)險(xiǎn)就是如果React做了調(diào)整积锅，整套框架都要做相應(yīng)的調(diào)整。
底層的優(yōu)化會(huì)很復(fù)雜膜廊。React是很難控制的乏沸，有些業(yè)務(wù)場景中需要優(yōu)化，我們只是在React Web這一層做優(yōu)化爪瓜，但這一層的優(yōu)化未必能很好地映射到下一層蹬跃。
Bable編譯+React
這個(gè)方案其實(shí)是一個(gè)有些莽撞的想法，它的業(yè)務(wù)復(fù)雜度會(huì)非常高铆铆，因?yàn)闊o法控制業(yè)務(wù)方寫的代碼蝶缀。
它最大的優(yōu)勢就在于業(yè)務(wù)方后期可以做過轉(zhuǎn)化之后再進(jìn)行下一次的調(diào)整。但目前來看這個(gè)方案的成本還是過高薄货。
Web組件+定制化框架
最后我們選擇了Web組件+定制化框架翁都。
我們把React Native代碼視作一套DSL語言，中間放了一層我們自己的React框架谅猾，保證提供部分組件三端的兼容性柄慰，也會(huì)使用部分社區(qū)三端組件進(jìn)行一些改造來達(dá)到我們的業(yè)務(wù)需求。
這個(gè)方案擺脫了組件和框架依賴關(guān)系中的不確定性税娜。
有很多本來要在組件中完成的功能可以放到框架層去做坐搔，減少了組件中的冗余代碼。
React內(nèi)部調(diào)用可能只用了一個(gè)providesModule進(jìn)行模塊之間的調(diào)用敬矩，但Web組件是無法通過這種方式直接調(diào)用框架里這些能力的概行。我們可以把這些API從底層拋出來，在Web組件+定制化框架這套方案里直接引入這些API弧岳。
我們還需要做的功能就是確保組件的兼容性凳忙，要讓組件在Native端和Web端都能使用。
API還會(huì)擴(kuò)展到hybrid的方案中禽炬〗眩可以在API層面做hybrid的判斷，提供出在Web中更豐富的一些API能力腹尖，然后根據(jù)實(shí)際開發(fā)中的情況進(jìn)行調(diào)整柳恐。
常用組件及API
在我們的業(yè)務(wù)中把React Native當(dāng)作一個(gè)體驗(yàn)更好的H5頁面來處理。
大多數(shù)開發(fā)React Native代碼的人原來都是做Web開發(fā)的，Web思路下的開發(fā)大量組件和API并不會(huì)使用胎撤。對于不會(huì)使用的這些組件和API，我們會(huì)寫一個(gè)空方法然后做一個(gè)提示断凶。
什么是需要在Web組件中做的伤提？
處理React Native組件中的props，轉(zhuǎn)換到相應(yīng)的Web實(shí)現(xiàn)认烁，或者初步處理交給框架二次處理肿男。
處理React Native的API，調(diào)用Web API却嗡，降級方案中調(diào)用hybrid API舶沛。
什么是需要在框架中做的？
在框架層面我們使用的還是React窗价，React框架中有組件生命周期如庭、setState與更新隊(duì)列、事件系統(tǒng)和Vitrual DOM這幾項(xiàng)撼港。
我們對框架做了一些精簡坪它，去除掉一些不穩(wěn)定的API、React提供但React Native不提供的API帝牡、propType往毡、事件合成以及對舊語法和舊瀏覽器的支持，簡化了部分事務(wù)系統(tǒng)和調(diào)度系統(tǒng)靶溜。
框架中要添加的功能是props(style)處理开瞭、部分公共的API和React Native框架API。
整合的優(yōu)勢就在于減少了API的頻繁引入罩息，優(yōu)化整個(gè)組件的編寫成本嗤详，包體積變得更小。減少重復(fù)的props檢查扣汪，提高了運(yùn)行的效能断楷。集成Webpack2，幫助業(yè)務(wù)方減少一些他們對一些不必要代碼的引入崭别。
React Native的上線保證
開發(fā)上線RN
橫向團(tuán)隊(duì)在RN開發(fā)中的職責(zé)就是需要提供一個(gè)完整的技術(shù)架構(gòu)方案冬筒，以及對落地之后技術(shù)的保證。
開發(fā)環(huán)境
我們?yōu)殚_發(fā)環(huán)境提供了一套測試容器茅主。
Web開發(fā)通過發(fā)測試包迅速查看在APP中的運(yùn)行情況舞痰。
提供了對應(yīng)用代碼進(jìn)行熱更新的能力。
保障
當(dāng)錯(cuò)誤率到達(dá)一定的數(shù)值會(huì)觸發(fā)監(jiān)控報(bào)警诀姚，然后發(fā)郵件提示業(yè)務(wù)方响牛，業(yè)務(wù)方就可以通過配置中心選擇。
功能性組件開發(fā)
Login、BI呀打、Share矢赁、APP、RouterManger贬丛。
性能優(yōu)化
我們認(rèn)為性能優(yōu)化最好的方法是揚(yáng)長避短撩银，目前我們主要做的是預(yù)加載和針對性的優(yōu)化，還有RN自身的優(yōu)化豺憔。
未來
未來在我們自定義的組件層中额获，還需要更多組件的支持。我們會(huì)考慮在React上做一些能力的封裝恭应，還會(huì)在實(shí)際業(yè)務(wù)上進(jìn)行更多的調(diào)整抄邀。
我今天的分享就到這里，感謝聆聽昼榛！
