感谢 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
来源: http://www.jianshu.com/p/42b92a5870d2