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

2字数 570阅读 244

感谢 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

推荐阅读更多精彩内容