React Native 原理浅析

0.简介

先说下了解这个有啥好处吧

1. 有利于使用原生平台提供的更多的功能和API，或者接入第三方的库和服务，比如接入阿里的服务。
2. 知道性能开销在哪，能针对的优化你的代码提高性能。
3. debug，知道的越多当然更容易知道问题为什么出现了
4. 更好的回答面试官的问题 😂😂

然后开始吧，RN的架构分为三块，js的部分，原生Native的部分，和连接这两者的桥Bridge。

以下为架构示意图

1. JavaScript线程

这是一个单独的线程，用来运行JavaScript代码，包括React组件的渲染逻辑，业务逻辑，事件处理等。JavaScript线程使用JavaScript引擎来执行代码，比如Hermes或者JSCore。

1.1 JavaScript引擎

JavaScript引擎是一个负责解析和执行JavaScript代码的模块。不同的JavaScript引擎有不同的性能和特性，比如Chrome用的是V8，Firefox用的是SpiderMonkey，Safari用的是JSCore。

而React Native则有两种选择，JSCore和Hermes。
JSCore兼容性更好，Hermes则性能更好更小(RN出品的)。
React Native默认使用JSCore，但是你也可以自己配置下，改成Hermes，

如果想深入了解可以看这两篇文章
1. React Native Memory profiling (JSC vs V8 vs Hermes)
2. 使用新的 Hermes 引擎 - react native

1.2 JavaScript代码

最熟悉的部分了，就你项目里的js代码了，包括React组件的渲染，业务逻辑，事件处理等。如果你已经做过RN的开发，那你会发现你可以用js的库，比如Typescript / Redux，当然了，也不是全部都能用，有一些不适配RN。

JS可以通过Bridge调用Native的方法函数，也能通过Bridge接收Native的消息。

2. Native线程

这个线程用来运行原生平台的代码，包括UI渲染，动画等。Native线程使用原生平台的语言和技术来执行代码，iOS是Objective-C或者Swift，而Android则是Java或者Kotlin。

2.1 原生平台

原生平台是指运行React Native应用的操作系统和设备，比如iOS平台和iPhone设备，Android平台和华为小米设备等。原生平台提供了一些基础的功能和API，比如视图(View)，文本(Text)，图像(Image)，按钮(Button)，滚动视图(ScrollView)，列表视图(ListView)等。这些功能和API可以被React Native封装成对应的React组件，并通过Bridge暴露给JavaScript线程。
所以，我们在写RN时import RN的 View Text，在IOS渲染用的就是IOS的组件，在安卓机渲染时用的就是安卓的组件。

原生平台也提供了一些高级的功能和API，比如相机(Camera)，定位(Geolocation)，剪贴板(Clipboard)等。这些功能和API被React Native封装成Native模块，并通过Bridge注册和导出给JavaScript线程。

2.2 原生代码

原生代码在Native线程中执行，并通过Bridge与JS线程通信。原生代码可以接收JS线程发送过来的数据和命令，并执行相应的操作。也可以写一些原生的代码，在需要的时候通过Bridge传递给JS线程，说的有点抽象，懂的自然懂。

3. Bridge

这是一个中间层，用来连接JavaScript线程和Native线程，实现数据和命令的传递和处理。Bridge使用序列化和反序列化的方式来编码和解码消息，并使用消息队列来缓存和发送消息。

Bridge是异步多，不会阻塞任何一方的执行，但消息多了也会影响性能。

同时也是一个单向的，它只能从一方向另一方发送消息，而不能同时进行双向通信。所以需要一种协议来规范消息的格式和含义，以及一种机制来实现回调和错误处理。

3.1 消息格式

Bridge传递消息用的是JSON。

这个消息JSON长这样。

{
   
  "module": "Camera",
  "method": "takePicture"