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/