react native

React Native 以下简称RN

---

RN 框架原理

将jsx转成js，并解析编译后的js文件，接口通过不同端的bridge，操作native的API。呈现给用户看的是原生的效果。

JSX 源码通过 React Native 框架编译后，通过对应平台的 Bridge 实现了与原生框架的通信。如果我们在程序中调用了 React Native 提供的 API，那么 React Native 框架就通过 Bridge 调用原生框架中的方法。 因为 React Native 的底层为 React 框架，所以如果是 UI 层的变更，那么就映射为虚拟 DOM 后进行 diff 算法，diff 算法计算出变动后的 JSON 映射文件，最终由 Native 层将此 JSON 文件映射渲染到原生 App 的页面元素上，最终实现了在项目中只需要控制 state 以及 props 的变更来引起 iOS 与 Android 平台的 UI 变更。
JavaScript使用JSON将命令异步发送到本机端以进行视图管理。
https://hackernoon.com/understanding-react-native-bridge-concept-e9526066ddb8

RN 编译原理

与React一样，将jsx转成js，打包到一个js文件中。

RN 运行原理

RN需要一个JS的运行环境， 在IOS上直接使用内置的javascriptcore，在Android 则使用webkit.org官方开源的jsc.so。
UI方面，与React一样，都是将对应的JSX编译成虚拟DOM，然后通过diff算法，算出变动后的JSON映射文件，最后有Native将JSON文件映射渲染到原生App的页面元素上，最终实现了在项目中只需要控制 state 以及 props 的变更来引起 iOS 与 Android 平台的 UI 变更。
在程序中调用原生API，则是通过Bridge，调用Native的API。

技术架构

a
js->原生代码->执行
如android：

启动一个app是，app调用java的代码，java调用c++代码，c++再调用js代码

bridge

---

其中在IOS上直接使用内置的javascriptcore， 在Android 则使用webkit.org官方开源的jsc.so

JavaScriptCore 和 JavaScriptCode框架

bridges

---

哪些公司在用

https://facebook.github.io/react-native/showcase

特点

1. React Native附带了ES2015支持

react native webview

背景

1. 通过url加载网页