ReactNative 简述(1)

ReactNative 简述

简述

现在比较主流的跨端开发框架就是ReactNative和Flutter，这两个框架的底层技术和思路完全不同，我们在学习完ReactNative的核心原理之后，也会去学习一下Flutter。
ReactNative的跨端思路还是通过原生的组件来实现UI效果，只不过在上层使用JS来描述构建View树，这个比较明显的好处就是使用JS来编写，对于前端的研发学习成本很低，而且JS作为一个解释语言，想要实现热更新逻辑非常简单。但是也有一些缺陷，就是JS语言和Native通信会有一定的耗时，虽然现在使用的新架构JSI一定程度减少了这个耗时，但是还是有着一些影响的，同时由于Android自身没有直接支持JS引擎，所以ReactNative的应用需要在启动时去加载JS引擎，这样应用启动也会有一些耗时，且这种通过JS语言去映射底层原生组件的方式，当需要实现比较复杂的UI，就需要针对每个平台都去实现一个Fabric组件，这样不利于跨端只使用一套代码。

Flutter是一种更加新的思想，使用dart语言，然后在所有端都使用skia引擎直接来绘制UI，这样就可以有着近乎原生应用的性能。Skia是一个绘制库，我们之前在介绍opengl的时候介绍过，Android 2D的绘制是会使用skia的，在Android上skia底层最终也会转换为OpenGL，所以如果使用skia来渲染UI，性能确实是和原生一样，相当于它为各个端统一了一套Native的UI绘制接口，从技术上来看，Flutter确实更加的先进，但是ReactNative目前的使用更加的多（个人感觉），组件生态以及文档也更加全面，两者各有优劣，我们会逐一来学习他们。

框架结构

ReactNative的实现原理其实比较简单，只是它应用了非常多的框架，如果要学习每个框架的细节，那就需要非常多时间和精力，我们主要聚焦ReactNative自身实现的原理和思想。

ReacNative的架构有过一次大改版，主要改动就是Bridge，之前是通过一个Bridge来实现JS和底层C++/OC来通信的，但是这个通信的代价比较大，所以后面就对框架进行优化，我们主要聚焦于新框架。

JS引擎
ReactNative编写UI是使用JavaScrpit的，JavaScript是一个解释语言，需要有一个JS引擎才能执行，也就是虚拟机，以前ReactNative使用的JS引擎是JavaScriptCore，这个JS引擎是苹果提供的，IOS会默认支持这个引擎，所以会很大程度优化IOS上RN应用的启动速度。新框架中，RN使用的JS引擎是Hermes，这个是FaceBook自己专门为RN开发的一套JS引擎，JS引擎的逻辑非常复杂，因为它的设计会非常大程度影响JS语言的执行速度，我们不会去研究JS引擎的源码。
React
上层使用了一套React框架，这个是一个前端框架，我们也不会去研究它的源码，这里简单介绍一下它的作用，我们知道UI的描述一般都会使用一个树来管理，Android里View也是一个树，那么JS层也需要有一个对应的树结构，我们用JS来描述UI，需要先在JS层构建一个树结构，然后再根据JS层的树结构来构建Native层的树结构，再去映射到真正的View，React就是做这个事，构建JS层的视图结构，在浏览器中就是DOM节点。
JSI
JSI是基于JS引擎提供的api做了一个轻量级的封装，它提供JS层和C++/OC层相互通信的能力，真正通信能力当然是JS引擎提供的，每个JS引擎都会提供一个api，但是他们的api可能不一样，JSI的作用也是磨平这个差异，JSI可以根据不同的引擎做不同的实现，但是提供对外一致的接口。
TurboModule
这个就是基于JSI，使用Codegen生成代码，提供一套脚手架，实现JS和底层通信，它的作用定位有点类似于aidl，我们通过自定义不同TurboModule可以实现不同的模块功能，比如Android和IOS的Native蓝牙接口肯定不同，我们可以定义一个蓝牙的TurboModule，使用代码生成器Codegen生成脚手架，然后在IOS和Android上做不同的实现，提供JS相同的接口。
Fabric 渲染器和组件
这个也是基于JSI，使用Codegen生成代码，提供一套脚手架，他和TurboModule的区别就是框架结构不同，因为他们的作用不同，它的作用主要是UI组件，所以它还需要包含一些基础的东西，比如Props，State等。

我们不太会去介绍RN怎么使用，因为使用文档官网写的已经比较全面了，我们主要是探究一下它的原理，使得我们看到RN的红屏报错堆栈可以知道怎么排查原因，而不是一脸懵逼重复看使用文档
检测半天哪里做错了，结果花了一天发现名字打错了啥的。