感谢 Nicolas Couvrat 在ReactFest 上分享的《 Wait, What Happens When My React Native Application Starts? 》
当我们点击我们应用图标启动我们用 native-react 写的应用时候,react native 如何将我们编写的代码呈现给用户的呢?这是今天分享的主要内容。
其实在那一刹那框架做了很多事。我们来一步一步解开他的工作内容。我们应用包括 2 部左边的为框架的(native语言和 javascript语言),右边开发人员创建自定义模块(native语言和 javascript语言)。
最初我们接触到的是 main 线程,也就是 UI 线程,因为 UI 渲染和交互都发生这个线程,这个线程是由系统提供的,也就是由 Android 或iOS 提供的,也是 native react 最初工作的线程。在这线程中首先会初始化 native 的框架。
我们所有的 javascript 创建的组件都会转化为native 组件呈现给用户,所以首选框架会创建 RootView ,这是一个容器,所有我们看到的组件都会放置到这个容器里。
创建好我们容器,接下来就创建我们的 bridge Interface (我们的桥梁接口)。bridge 是用于连接 native 也就是 java 或是 objectc 和 javascript 的桥梁,大家想为什么是接口呢,不就是连接 javascript 和 native 吗,其实不仅连接 native 还可能连接到 c++ 。所以这将 bridge 设计为接口。
bridge 是双向的,负责连接 naive 到 js 和 js 到 native。
然后创建 javascript 线程用于运行 javascript 的虚拟机和一个 native module 线程。这次只分享到用户看到界面前都发生了什么所以不会涉及到 native module 线程。
然后加载开发人员编写的自定义module ,作为插件的形式进行插入 ,react native 可以创建自定义模块,然后 plugin 应用,
首先 plugin 创建一个自定义module ,然后我们保存一个指向js native bridge 的引用。这样做的原因也很简单就是为了以后 javascript 可以访问我们的 module 。