React Native之原理浅析, iOS原理分析与实践解析、Android原理分析与实践解析

一、JavaScriptCore

讲React Native之前，了解JavaScriptCore会有帮助，也是必要的。React Native的核心驱动力就来自于JS Engine. 你写的所有JS和JSX代码都会被JS Engine来执行, 没有JS Engine的参与，你是无法享受ReactJS给原生应用开发带来的便利的。在iOS上，默认的就是JavaScriptCore， iOS 7之后的设备都支持. iOS 不允许用自己的JS Engine. JavaScriptCore来自于WebKit, 所以，安卓上默认也是用JavaScriptCore.

你深入了解React Native的第一站应该是 JavaScriptCore

JavaScriptCore在iOS平台上给React Native提供的接口也仅限于那几个接口，你弄明白了JavaScriptCore那几个接口, React Native 剩下的魔法秘密都可以顺藤摸瓜来分析了。
接下来要讲解的就是Facebook围绕这几个接口以及用一个React来颠覆整个native开发所做的精妙设计和封装.

二、浏览器工作原理

浏览器通过Dom Render来渲染所有的元素.
浏览器有一整套的UI控件，样式和功能都是按照html标准实现的
浏览器能读懂html和css。
html告诉浏览器绘制什么控件(html tag)，css告诉浏览器每个类型的控件(html tag)具体长什么样。
浏览器的主要作用就是通过解析html来形成dom树，然后通过css来点缀和装饰树上的每一个节点

UI的描述和呈现分离开了

1. html文本描述了页面应该有哪些功能，css告诉浏览器该长什么样。
2. 浏览器引擎通过解析html和css，翻译成一些列的预定义UI控件，
3. 然后UI控件去调用操作系统绘图指令去绘制图像展现给用户。
4. Javascript可有可无，主要用于html里面一些用户事件响应，DOM操作、异步网络请求和一些简单的计算

在react native 里面，1和2是不变的，也是用html语言描述页面有哪些功能，然后stylesheet告诉浏览器引擎每个控件应该长什么样。并且和浏览器用的是同一个引擎.

在步骤3里面UI控件不再是浏览器内置的控件，而是react native自己实现的一套UI控件（两套，android一套，ios一套），这个切换是在MessageQueque中进行的，并且还可以发现，他们tag也是不一样的

Javascript在react native里面非常重要

• 它负责管理UI component的生命周期，管理Virtual DOM
• 所有业务逻辑都是用javascript来实现或者衔接
• 调用原生的代码来操纵原生组件。
• Javascript本身是无绘图能力的，都是通过给原生组件发指令来完成

三、React Native 架构

参考

http://blog.poetries.top/2019/10/02/rn-yuanli/

https://zhuanlan.zhihu.com/p/41920417

https://juejin.im/post/5a6460f8f265da3e4f0a446d

https://cloud.tencent.com/developer/article/1037539