WOODONCHAN

React Native 开篇

React Native最近越来越火,我想应该没有人不知道吧,然而对他真正了解的又有几个呢,大部分人会误以为React Native所用的控件页面都是通过类似HTML5搭建WebApp那样全部基于Web 来实现的,并且会用疑惑的语气说到,性能能应该很差吧?其实并不是,我们单单从名字上就可以看出来React Native用的是Native控件,React Native的控件是通过对源生的控件进行封装的,其实本质上我们使用的还是源生控件。

正文

  • Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native
  • React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。
  • React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。
  • React Native 把重点放在所有开发人员关心的平台的开发效率上,开发者只需学习一种语言就能轻易为任何平台高效地编写代码。
  • React Native 支持实时热部署,可以及时进行版本迭代升级。

简单分析React Native for Android 的原理

React Native运行的前提是必须有一个JS的运行环境,Android中使用的是webkit官方开源的 jsc.so 。React Native编译时会把我们编写的应用JS代码以及以来的系统框架编译成一个名为index.android.bundle JS文件,React Native的框架目的就是为了解析并运行这个JS脚本文件,React Native中JS与Java代码之间通信采用的是Bridge机制,如果调用的是React Native扩展的API则会通过Bridge调用Native方法,如果是界面UI则会映射到Virtual DOM虚拟的JS数据结构中,通过Bridge传递到Native层然后根据属性信息绘制真实Native的View。React Native沿用了React的Virtual DOM编程模型,让前端开发者可以用类似的DOM编程模型就可以开发原生APP,另一方面可以让Virtual DOM适配实现到各个平台,从而达到跨平台的能力。

React Native for Android 实质上就是在安卓程序上加上了很多JS响应事件,应用主要分为两个线程,一个为APP创建后Android为APP创建的UI主线程另外一个则是JS线程,UI线程创建一个应用事件循环后就挂起Looper等待新事件发过来,不管是Android系统还是JS,事件都是统一发送到UI主线,由事件驱动各自对象执行并响应相应命令。我们知道Android APP在系统中都是使用一个事件循环来运行的,实际上JS也是单线程事件循环,UI主线程会把系统事件或用户事件抛往JS层,同时JS层也会不断将用户或JS层所产生的事件通过bridge机制调用指定API方法或UI组件,从而驱动JAVA层完成View的渲染工作。

使用React Native所需要具备的技能有哪些

  • 需要具备基本的前端知识,其中 JavaScript 和 CSS 较为重要
  • React Native 0.18版本之后采用的是ECMAScript 6(俗称ES6或ES2016)的标准进行编程。所以我们需要具备ECMAScript6技能,这样可以使用ES6更加快速地进行功能开发
  • 由于React Native 是通过React.js演变而来的,所以开发者还需要对React语法以及JSX语法有一定的了解

总结

React Native沿用了React 的思想,使得前端工程师更容易涉足其中,由于不能完全抛开 Android 或 iOS 的细节,导致开发者还是需要具备相应Android或iOS开发基础的,因为开发过程中可能会涉及到一些Native方面的知识。开发效率上相比原生平台开发更快,性能方面相比Hybrid方案性能更好。了解了React Native后我发现由于平台的差异性,它并不能完全做到一次编写到处运行,部分组件功能开发者可能需要提供两套不同代码。虽然目前React Native还存在一些技术难点有待攻破,但是相信React Native在后续的版本迭代更新中,这些问题一定会被解决的。让我们一起敬请期待吧。