React Native 简介

中文文档地址

这里是我做好的一个Demo，包含native与js互跳的一个例子，可以先看看大概的样子，以及RN能做啥

https://github.com/iLoveForDi/iShiWuDemo

image.png

image.png

React Native

• React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
• JSX
  • 使用 JSX 来替代常规的 JavaScript。
  • JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
  • 我们不需要一定使用 JSX，但它有以下优点：
    • JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
    • 它是类型安全的，在编译过程中就能发现错误。
    • 使用 JSX 编写模板更加简单快速。

特点

• 基于组件开发,提供代码的复用率。
• 各个平台功能代码可以进行复用,官方数据表明:iOS和android功能代码可以达到90%以上的复用。
• 不用Webview,彻底摆脱了Webview的限制:交互和性能问题。
• 相对其它Hybrid 方案,React Native性能更好,用户体验更接近原生。
• 减少编译时间,提高开发效率。
• 可以采用热更新方式进行app功能升级和问题修复,提高app的迭代率和开发效率

运行原理

image.png

• React Native框架中，JavaScript内存中维护了一个Virtual DOM，JSX内容在Virtual DOM中被转化翻译成真实的DOM树，Virtual DOM与真实显示的DOM保持一一对应的关系
• 当界面发生变化时，得益于高效的 DOM Diff 算法，我们能够知道 Virtual DOM 的变化，从而高效的改动 DOM，避免了重新绘制 DOM
• 相对Browser环境下的DOM而言，Virtual DOM是DOM在内存中的一种轻量级表达方式（原话是lightweight representation of the document），可以通过不同的渲染引擎生成不同平台下的UI，JS和Native之间通过Bridge通信。
• React-Native在JavaScript中抽象操作系统原生的UI组件，代替DOM元素来渲染，使用的是Android或iOS的本地控件，所以在UI渲染上已经非常接近Native App了。尽管业务逻辑代码使用JavaScript，但由于JavaScript是即时编译的，也就是第一次使用时会将JavaScript代码编译成二进制文件，所以JavaScript得运行效率比较高。因此，React Native的运行效率要比基于HTML5、CSS等技术的PhoneGap、AppCan高很多，因为这些技术直接使用HTML5进行渲染，而HTML5会大量使用DOM技术，DOM的操作是很消耗性能的。

通讯机制

React Native用iOS自带的JavaScriptCore作为JS的解析引擎，但并没有用到JavaScriptCore提供的一些可以让JS与OC互调的特性，而是自己实现了一套机制，这套机制可以通用于所有JS引擎上，在没有JavaScriptCore的情况下也可以用webview代替，实际上项目里就已经有了用webview作为解析引擎的实现，应该是用于兼容iOS7以下没有JavascriptCore的版本。

普通的JS-OC通信实际上很简单，OC向JS传信息有现成的接口，像webview提供的-stringByEvaluatingJavaScriptFromString方法可以直接在当前context上执行一段JS脚本，并且可以获取执行后的返回值，这个返回值就相当于JS向OC传递信息。React Native也是以此为基础，通过各种手段，实现了在OC定义一个模块方法，JS可以直接调用这个模块方法并还可以无缝衔接回调。

参考资料：
https://www.jianshu.com/p/2b86945e08d3
https://www.jianshu.com/p/5cc61ec04b39