React Native 应用启动时候究竟发生了什么（1）

感谢 Nicolas Couvrat 在ReactFest 上分享的《 Wait, What Happens When My React Native Application Starts? 》

当我们点击我们应用图标启动我们用 native-react 写的应用时候，react native 如何将我们编写的代码呈现给用户的呢？这是今天分享的主要内容。

bandicam 2019-02-25 05-48-04-006.jpg

其实在那一刹那框架做了很多事。我们来一步一步解开他的工作内容。我们应用包括 2 部左边的为框架的（native语言和 javascript语言），右边开发人员创建自定义模块（native语言和 javascript语言）。

bandicam 2019-02-25 05-51-51-660.jpg

最初我们接触到的是 main 线程，也就是 UI 线程，因为 UI 渲染和交互都发生这个线程，这个线程是由系统提供的，也就是由 Android 或iOS 提供的，也是 native react 最初工作的线程。在这线程中首先会初始化 native 的框架。

bandicam 2019-02-25 05-52-08-172.jpg

我们所有的 javascript 创建的组件都会转化为native 组件呈现给用户，所以首选框架会创建 RootView ，这是一个容器，所有我们看到的组件都会放置到这个容器里。

bandicam 2019-02-25 05-52-31-451.jpg

创建好我们容器，接下来就创建我们的 bridge Interface （我们的桥梁接口）。bridge 是用于连接 native 也就是 java 或是 objectc 和 javascript 的桥梁，大家想为什么是接口呢，不就是连接 javascript 和 native 吗，其实不仅连接 native 还可能连接到 c++ 。所以这将 bridge 设计为接口。

bandicam 2019-02-25 05-52-53-437.jpg

bridge 是双向的，负责连接 naive 到 js 和 js 到 native。

bandicam 2019-02-25 05-53-11-161.jpg

bandicam 2019-02-25 05-53-21-660.jpg

然后创建 javascript 线程用于运行 javascript 的虚拟机和一个 native module 线程。这次只分享到用户看到界面前都发生了什么所以不会涉及到 native module 线程。

bandicam 2019-02-25 05-53-34-068.jpg

然后加载开发人员编写的自定义module ,作为插件的形式进行插入 ，react native 可以创建自定义模块，然后 plugin 应用，

bandicam 2019-02-25 05-53-55-418.jpg

首先 plugin 创建一个自定义module ，然后我们保存一个指向js native bridge 的引用。这样做的原因也很简单就是为了以后 javascript 可以访问我们的 module 。

bandicam 2019-02-25 05-53-57-363.jpg

bandicam 2019-02-25 05-54-14-331.jpg