React Native at first sight

what is React Native?

跟據官方的描述, React Native是一套使用 React 構建 Native app 的編程框架. 推出不久便引起了普遍關注, 這也得益於 JavaScript 開放而活躍的技術社區和 React Native 完備的技術體系支持. 本文試圖歸納的介紹 React Native.

React Native 主要是一套 Runtime, 包括一套 React.js 庫使得開發能夠用 React 的方式開發, 以及一套 Native 的Ployfill 彌補webkit 渲染&&交互能力的不足.

javascript runtime運行在 JavaScriptCore 上, JavaScriptCore 是WebKit的 JavaScript 引擎, 也就是 Safari 中的 JavaScript 引擎, Apple 把他叫作 Nitro. JSC 自從2008年誕生, 至今作了不少優化, 成熟的執行引擎保證了運行效率. RN 自己沒有和 js 引擎綁定, 選擇 JavaScriptCore 的緣由是 iOS 對 JSC 的自然支持.

how React Native works?

React Native 經過執行javascript, 計算出佈局 樣式 事件處理的信息, 保存到一個相似於DOM的數據結構(ReactElement tree)中. 經過pure native組件渲染出UI. 事件處理上也是首先native先處理, 再根據javascript的事件監聽調用響應的callback. 是將javascript的邏輯能力和native的性能的折中整合.

在組件開發和複用方面, ReactNative 採用了 RequireJS 對組件的組織方式. RequireJS 在 node 中普遍使用, 同 npm 結合讓組件的重用變得簡單. 一個文件就是一個組件, 組件能夠發佈到 npm 倉庫, 經過配置描述組件名稱和版本, 其餘開發能夠直接引用現有的組件. 同 cocoapods 和 maven 相似, 解決了 js 代碼依賴管理和協做的問題.

在組件開發上面, UI 開發方式上面沿用了 React 的優秀設計, React.js 在 javascript 界掀起了一場熱潮, 將 面向DOM 的開發方式變爲以面向組件的開發. 這卻是和 native 的開發模式很像, 先設計靜態組件樣式, 再處理交互流程, 抽離可變狀態. 可是 React 加上 javascript 的編程能力是 Java 和 OC 不能比的... React 利用 Babel 支持了 ES6的語法, 併爲了簡化 DOM 的編寫設計了 JSX, 這些大大簡化了開發量, 並使得開發變得有趣. React 也採用了依賴反轉的設計, DOM 重繪, 組件的生命週期, 都是由React.js控制, 開發只須要關心UI 和交互設計, 能夠參考 iOS 中的各類生命週期的 delegate 理解.

Native和javascript的通訊是經過native調用javascript實現的, 調用只能是單向的, 老是從native到js. 這套機制目前已經比較成熟, 但RN經過實現對象傳遞和batch處理js回調的方式解決了雙向通訊和性能的問題, 對於開發者就像可以作到雙向的調用同樣. 在 Native 部分, RN 提供了 javascirpt 和 Native 通訊時對象傳遞的方案, 並經過單向調用返回註冊callback的方式, 讓native在恰當的時機回調js方法, 而且經過讓Native 組件運行在獨立線程的方式和batch調用callback的方式優化總體的性能.

RN 官方提供了不少 Native 的組件, 而且因爲其開放性, 網上有不少 react-parts 這些開源的組件庫, 開發者能夠用他們作出精細的交互設計.

Disadvantage

loadtime問題, 因爲RN是以javascript爲主體的設計, 頁面渲染須要先執行一次javascript render調用. 目前通過一些優化後(framework抽離複用, js資源cache)在iPhone5上面測試簡單的頁面渲染, js執行的時間要200ms左右, 這個時間主要是在第一次js執行的開銷. 這個時間對於用戶是能夠感知的, 並且會隨着js的複雜增加.

內存開銷. 因爲依賴了js引擎, 在內存佔用上會明顯高於pure native, 這對於android的低端機而言問題尤爲嚴重.

功耗, 因爲額外的js的執行頻繁的通訊須要的序列化操做都會形成功耗的上升, 雖然沒有親測過具體的差距, 但功耗也是值得關注的問題之一.

雖然存在這些問題, 但動態能力對於native開發而言的誘惑太大, native開發仍是須要根據要解決的問題選擇合適的技術. 對於js開發而言, 使用本身熟悉的環境可以大幅提高在客戶端的體驗, 是很是棒的技術.

Reference

https://facebook.github.io/react-native/
http://trac.webkit.org/wiki/JavaScriptCore
http://ariya.ofilabs.com/2012/06/nitro-javascriptcore-and-jit.html
http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome
https://news.ycombinator.com/item?id=8964935
http://tadeuzagallo.com/blog/react-native-bridge/

 

原創文章, 轉載請註明來源 http://www.cnblogs.com/hucn/p/5077713.html  http://nickolashu.github.io/2015/10/12/react-native-at-first-sight/

更多文章關注個人我的博客

http://nickolashu.github.io/