RN Native 框架原理学习（一）

1、React Native 的大致结构

一、一图胜千言，咱们看一个总体框架图

如上图，React Native的跨平台主要由三层构成，其中C++做为中间设配层桥接，从而实现JS和Native的双向通信。

• Js层：处理事件分发及UI Layout，日常开发最经常使用的。通用jsx来写业务代码，经过flexbox来实现布局。
• C++层：c++层最主要是封装了JavaScriptCore，它是一个全新的支持ES6的webKit。解析js文件是经过JSCExectutor进行的，Bridge链接了java与js之间的通讯。
• Java层：java层就是app原生代码，C++层的javascript解析器javascriptCore来执行js代码，从而构建原生UI等。java层依赖于众多优秀开源库，在图片处理使用的是Fresco，网络通讯使用的是okhttp，在java层原生的功能均封装为Module，如Toast和Log等。

其实RN总体框架的目的就为了让Native端能够解析，执行JS脚本

二、相关概念 WebKit、JavaScriptCore、V8

一、WebKit

WebKit是一个开源浏览器引擎（Safari、Chrome等使用）、相似的还有Gecko（Mozilla Firefox 等使用）和Trident（IE 使用）

其中的JavaScript引擎，负责javaScript的解释、编译、执行。 各家重写了这部分，实现本身的JS引擎，例如Google的 V8引擎。

二、JavaScriptCore

JavaScriptCore是webKit中默认的JS引擎，Google使用V8代替JavaScriptCore做为其chromium的JS引擎（Node.js的引擎也是V8）。 在RN框架中，IOS上直接使用内置的javascriptcore、Android中使用的是jsc.so。 而Weex使用的则是V8引擎；

2、实现原理

• UI层 View： react native中全部的标签都不是真实控件，Js代码中所写的控件，都做为一种Map中的Key值。JS端经过这个Key组合的Dom，放到Virtual Dom这个虚拟的JS数据结构中，而后经过JSBridge传递到Native，Native端会解析这个Dom，从而获得对应的Native控件。好比JS中的 ，在Android对应为ViewGroup， 对应TextView

  

• API Module： 原生端提供的各类Module模块参数，包括ModuleID、MethodID、Params，和JS端提供的各类Module模块参数，都会在C++层的Bridge 中注册。 Js/Java 调用的ModuleID、MethodID、Params，经过Birdge映射，转换成Java/Js对应的ModuleID、MethodID、Params，实现两端方法的互调。通讯的数据和指令，在中间层会专成Json传输。

  

• 消息循环、线程模型： React Native 为JS引擎建立了一个独立的线程，在Android上主要由三个线程，每一个线程都由与其绑定的消息队列

  • UI线程：即Android中的主线程，负责绘制UI以及监听用户操做。
  • Native线程：负责执行C++代码，该线程主要负责Java与C++的通讯。
  • JS线程：负责解释执行JS。

  三个线程的交互主要借助Android 的Handler来完成。

3、参考文章

• zjutkz.net/2016/05/03/…
• blog.csdn.net/u014486880/…
• www.jianshu.com/p/02be425d7…
• juejin.im/post/5c0a3e…