已經(jīng)很長(zhǎng)時(shí)間沒(méi)有寫(xiě)博客了。。這一年因?yàn)轫?xiàng)目需求一直在用 React Native 的框架來(lái)進(jìn)行跨平臺(tái)開(kāi)發(fā)，這段期間不管是學(xué)習(xí)RN還是開(kāi)發(fā)維護(hù)項(xiàng)目都一直很忙，抽個(gè)空來(lái)寫(xiě)寫(xiě)用RN開(kāi)發(fā)的心得，也寫(xiě)寫(xiě) RN 相比與另一個(gè)跨平臺(tái) flutter 這套框架的優(yōu)缺點(diǎn)。說(shuō)實(shí)話 RN 對(duì)于兩個(gè)平臺(tái)來(lái)說(shuō)適配程度比較傾向于 iOS，而安卓的坑更多一些。剛開(kāi)始入門(mén) RN 的時(shí)候真的非常令人痛苦，報(bào)一個(gè)匪夷所思的錯(cuò)在 Google 翻了五頁(yè)都沒(méi)找到好的解決方法，而這樣的遇坑解坑每天都會(huì)進(jìn)行，直到現(xiàn)在已經(jīng)完全可以穩(wěn)定開(kāi)發(fā)，這一路走來(lái)真的是很不容易。所以對(duì)于 RN 這個(gè)跨平臺(tái)框架來(lái)說(shuō)難是剛開(kāi)始難，說(shuō)簡(jiǎn)單多寫(xiě)幾個(gè)頁(yè)面之后感覺(jué)也很簡(jiǎn)單。因?yàn)楝F(xiàn)在RN已經(jīng)很普及了，有些第三方庫(kù)也基于成熟，走到現(xiàn)在來(lái)看，這樣的跨平臺(tái)開(kāi)發(fā)框架真的很香~~
公司一直在調(diào)研 flutter 是否可以取代 RN 來(lái)進(jìn)行一套重構(gòu)，但是一直沒(méi)有實(shí)行，有兩個(gè)原因吧，一、flutter 他一直沒(méi)有改善 不能熱更新 這個(gè)軟肋，可能這一點(diǎn)會(huì)有爭(zhēng)議，你直接走冷更新不就好了么，但是在項(xiàng)目中一旦在線上發(fā)現(xiàn)有bug或者這個(gè)需求只更需改js代碼的話，及時(shí)走熱更新真的會(huì)比冷更新效率提高不止幾倍；二、第三方庫(kù)比較少，還處在發(fā)展階段，這點(diǎn)很明顯了，現(xiàn)造輪子不是不行，而是對(duì)于項(xiàng)目進(jìn)度來(lái)說(shuō)真的太耗時(shí)間了。大體就這兩點(diǎn)吧，但是如果你不介意這個(gè)的話，我覺(jué)得完全可以考慮一下 flutter，因?yàn)镽N確實(shí)比較耗性能，這也是RN的一個(gè)軟肋，鑒于RN是用js調(diào)用原生框架，所以渲染的是原生組件，而且JSX需要?jiǎng)?chuàng)建一個(gè)父視圖才能包裹子視圖，所以父視圖只是一個(gè)承接作用，而沒(méi)必要讓用戶看見(jiàn)他，進(jìn)而有很多冗余的父視圖被渲染，性能自然比較低。flutter就不同了，F(xiàn)acebook自己開(kāi)發(fā)了一套渲染引擎Skia，可最?程度保證樣式?jīng)]有平臺(tái)差異性，在release模式下性能大大提高。
-
在這里我自己總結(jié)了一個(gè)表
Flutter 與 React Native 的對(duì)比.png -
release 包性能測(cè)試
平臺(tái): iPhone 6 16GB iOS 12.1.4
兩者均采用Release模式
測(cè)試方法:數(shù)據(jù)量均為1000個(gè)簡(jiǎn)單的左圖右文的cell
左圖flutter，右圖RN
1000個(gè)cell.png
Flutter：
可以看到幀數(shù)接近于60FPS，即使快速滑動(dòng)也沒(méi)有卡頓
React Native:
相較于前者，React Native啟動(dòng)稍慢，卡頓明顯,幀數(shù)曲線也沒(méi)有前者平滑
可能我對(duì)RN接觸的比較多，而flutter僅僅限于demo的程度，所以可能會(huì)有主觀傾向，這是我的個(gè)人看法，有看法不一樣的可以一起討論下~~
