reactNative讲解（1）
本章主要是主要分为以下
1、reactNative如何做到热重载技术的，以及热重载技术原理
2、Android原生，ReatNative,flutter的区别（UI显示原理、状态更新原理，编译流程）
3、ReatNative （ReatNative）生命周期
4、ReadNative组件视图与FIex
5、组件之间的通信与相互调用
ReatNative原理
React Native框架分析结构图
image.png
层次架构：
-
Java层：该层主要提供了Android的UI渲染器UIManager（将JavaScript映射成Android Widget）以及一些其他的功能组件（例如：Fresco、Okhttp）等，在java层均封装为Module，java层核心jar包是react-native.jar，封装了众多上层的interface，如Module，Registry，bridge等。
-
C++层：主要处理Java与JavaScript的通信以及执行JavaScript代码工作，该层封装了JavaScriptCore，执行对js的解析。基于JavaScriptCore，Web开发者可以尽情使用ES6的新特性，如class、箭头操作符等，而且 React Native运行在JavaScriptCore中的，完全不存在浏览器兼容的情况。Bridge桥接了java ， js 通信的核心接口。JSLoader主要是将来自assets目录的或本地file加载javascriptCore，再通过JSCExectutor解析js文件。
-
Js层：该层提供了各种供开发者使用的组件以及一些工具库。
Component：Js层通js/jsx编写的Virtual Dom来构建Component或Module，Virtual DOM是DOM在内存中的一种轻量级表达方式，可以通过不同的渲染引擎生成不同平台下的UI。component的使用在 React 里极为重要, 因为component的存在让计算 DOM diff 更高效。
ReactReconciler : 用于管理顶层组件或子组件的挂载、卸载、重绘。
注：JSCore，即JavaScriptCore，JS解析的核心部分，IOS使用的是内置的JavaScriptCore，Androis上使用的是 https://webkit.org 家的jsc.so。
Java层核心类及原理，如下所示：
ReactContext
ReactContext继承于ContextWrapper，是ReactNative应用的上下文，通过getContext()去获得，通过它可以访问ReactNative核心类的实现。
ReactInstanceManager
ReactInstanceManager是ReactNative应用总的管理类，创建ReactContext、CatalystInstance等类，解析ReactPackage生成映射表，并且配合ReactRootView管理View的创建与生命周期等功能。
ReactRootView
为启动入口核心类，负责监听及分发事件并重新渲染元素，App启动后，其将作为App的root view。
CatalystInstance
CatalystInstance是ReactNative应用Java层、C++层、JS层通信总管理类，总管Java层、JS层核心Module映射表与回调，三端通信的入口与桥梁。
JavaScriptModule
JavaScriptModule是JS Module，负责JS到Java的映射调用格式声明，由CatalystInstance统一管理。
NativeModule
NativeModule是ava Module，负责Java到Js的映射调用格式声明，由CatalystInstance统一管理。
JavascriptModuleRegistry
JS Module映射表,负责将所有JavaScriptModule注册到CatalystInstance，通过Java动态代理调用到Js。
NativeModuleRegistry
是Java Module映射表,即暴露给Js的API集合。
CoreModulePackage
定义核心框架模块，创建NativeModules&JsModules。
启动过程的解析：
1.ReactInstanceManager创建时会配置应用所需的java模块与js模块，通过ReactRootView的startReactApplication启动APP。
2.在创建ReactInstanceManager同时会创建用于加载JsBundle的JSBundlerLoader，并传递给CatalystInstance。
3.CatalystInstance会创建Java模块注册表及Javascript模块注册表，并遍历实例化模块。
4.CatalystInstance通过JSBundlerLoader向Node Server请求Js
Bundle，并传递给JSCJavaScriptExectutor，最后传递给javascriptCore，再通过ReactBridge通知ReactRootView完成渲染。
Android原生，ReatNative,flutter的区别
Android原生，ReatNative,flutter的区别三者区别我从##三个方面讲：
1、ui显示路程
Android原生
通过layout布局决定ui效果，其中样式文件和界面素
写在布局中
优缺点：性能高效，开发者使用死板，通过文件的方
式强行将代码与布局分离
React
React独创了virtual DOM机制， DOM是一个存在于内存中的 javaScript对象，他与DOM是一一对应关系，也就是说只要有Dom树， 我们就能渲染出DOM， 当界面发生改变时，通过高效的DOM Diff算法，我们就能够知道Virtual DOM的变化， 从而高效的改动DOM，避免重新绘制DOM， 通过DOM映射成原生控件显示咋屏幕上
优缺点：React是一个专注于UI部分框架， 做UI架构很好， 毕竟DOM与原生的映射，难免会发生损耗， 对于html还是高出很多
flutter
flutter是Google推出的混合式开发的架构， 他基于dart描述的ui效果， 直接通过Skia图像处理引擎渲染到界面上， 没有虚拟DOM， 也没有映射， 性能相对于原生还要高一点
优缺点：性能高，由于flutter目前不够成熟， 支持的生态有限。
2、状态更新机制
Android
andoid 几乎是靠代码设置， 例如 TextView发生改变需要先findbyId然后再进行settext，虽然目前有MVVM，但是不是最完美的状态机制，只不过代码少些。
#######备注：真正的状态机制是只有数据状态有周期，有传递特性， 也能因为数据改变了影响UI，Android中是没有这种设置机制
React
万物皆组件，界面，按钮text都是组件，有组件就有状态，有状态就会发生相对应的事件传递，数据就会发生变化实时影响UI
fiutter
所有的组件分为两类 1、有状态2、无状态 犹豫并不是基于DOM展开，有状态的组件性能会开销大， 因为需要底层进行实时监听，其他的都和ReatNative设计概念是一样的， 只不过底层细节不一致。
3编译流程
Android 编译流程
如图：
image.png
java文件编译成class，然后被dex工具编译成dex最终打包成apk随后通过adb命令安装到手机中
Java文件发生变化， 上述的流程需要重新来一遍， 安装到手机中才能看到最终的效果。
ReactNative编译流程
image.png
FIutter编译流程
image.png
ReatNative组件生命周期
组件（Component）生命周期流程如图
image.png
可以把组件生命周期分为三个阶段：
第一阶段： 组件第一次绘制阶段， 如如图中上面虚线框内在这里完成组件的加载与初始化
第二阶段： 是组件在运行和交互阶段， 如图中左下角虚线框， 这阶段可以处理用户交互， 或者接收事件更新界面
第三阶段: 是组件鞋子消亡的阶段， 如图中右下角的虚线框主要做些组件清理工作
Component生命周期方法介绍
image.png
Component生命周期的方法盗用次数
image.png
外部影响周期
当外部组件与之交互的时候， 这时发生变化。还会会调用componetWillReceiverProps方法： 如图
image.png
组件结束时生命周期如下：
image.png
React组成：
组件组成分为 1、view 2、状态
1、view主要是fiex一些空间， 例如Text， view,Image等一些控件，这个后期再做描述
2、状态：
在React中 状态属性分为两种
第一种props
props主要是初始化 数据的属性，该数据使用props之后， 数据是不可改变的 ，props作用主要是父组件向子组件传递数据时， 子组件调用props来接收数据，
第二种state
state主要是当前组件的数据状态， 可以改变的 ， 当state发生改变时， 会影响ui数据更新。
props和state会在下章组件之间的通信着重描述。
FIex
FIex称为弹性盒子布局。 fiex方案是由W3c于2009推出的
优势： Flex布局使得子项目能够“弹性”的改变其宽高，自由填充容器剩余空间，以适应容器变大，或者压缩子项目的自身。以适应容器变小，同时还可以方便子项目方向和顺序，Fiex常用于宽高自适应或子项目大小成比例或水平垂直对齐等场景， 几乎可胜任任何的布局场景，都可以通过样式属性来解决。
Fiex布局与Android常用布局对比：
image.png
image.png
image.png
image.png
image.png
image.png
image.png
