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 加载网页