- 概览\ - turbo Module是 Native Module 的升级版\ - turbo是涡轮的意思，Native Module能够让js调用Native的Module/原生api，turbo Module是对 Native Module 的全面升级，以加快从 JavaScript 初始化和调用原生模块的方式。\ - 现有架构Native Module存在的问题\ - 初始化速度，由于不支持惰加载，app启动时加载全部Native Module，启动时间过长\ - 接口一致性，Native Module 所提供的接口，在 Native 侧和 JavaScript 侧各有一份，两者必须严格一致。但一致依赖缺少保障机制\ - 单例，Native Module 采用单例设计，生命周期过长\ - 多余的运行时操作，Native Modules的方法列表是在运行时进行扫描，完全可以放到编译期\ - 反射，Native Module 中的方法通过运行时反射调用。这个反射可以被优化。\ - 新旧方式对比\ - ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/967f2e929f0b465c987cc2c94a03b9c0~tplv-k3u1fbpfcp-zoom-1.image)\ - 实现原理\ - Turbo Module 建立在 JSI 机制之上。\ - RN引擎初始化时，往js侧全局global添加一个名叫__turboModuleProxy的桥接方法\ - js侧通过这个桥接方法调用原生侧的turbo module，js侧传入module name，原生返回一个HostObject类型的对象\ - 原生侧根据接收到的module name查找/创建trubo module\ - Turbo Module其实是JSI中的HostObject\ - TurboModule类继承自HostObject，这样js就可以持有TurboModule对象![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49bae66a4f794e7ab99d0c0341f6b32f~tplv-k3u1fbpfcp-zoom-1.image)\ - TurboModule有两个子类ObjCTurboModule和JavaTurboModule，分别用于ios和安卓\ - js侧每次调用HostObject的方法，最终会进入TurboModule的get方法\ - 利用jsi机制建立js层与c++层的通道，js层传入module name，获取在c++层注册的trubo module，并调用该module暴露的api(方法和属性)\ - Turbo Module 懒加载实现\ - 当js侧调用turbo module时，通过桥接方法，向原生端传递要调用的module name\ - 原生侧收到桥方法时，创建该turbo module实例\ - 首先读取本地缓存，命中则返回该turbo module实例\ - 未命中则尝试创建c++ module实例\ - 创建失败则创建JavaTurboModule/ObjcModule实例\ - 以上过程中，创建成功将实例写入缓存\ - 创建turbo module实例的过程\ - 通常由codegen生成一份配置表，键值对格式，key 是 module名，value是原生类包，配置表的结构可参考下面的系统核心模块![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/151a0eb6f7484f97abecb49f989448d0~tplv-k3u1fbpfcp-zoom-1.image)\ - 从配置表中读取module 类名，然后创建实例化对象\ - 接口一致性保障\ - Turbo Module通过JS侧的接口生成C++中间层的JSI代码，并且生成对应的OC/Java的接口。然后基于接口来实现Native方法，从而达到了JS - Native两侧的接口一致性\ - CodeGen是一个开发工具，作用是静态类型检查器(Flow或TypeScript)，目的是以自动化的形式来保证JS侧与Native侧的兼容性。用来解决之前检查JS侧接口与Native侧接口一致性比较困难的问题\ - 源码分析\ - TurboModuleManager对象创建\ - 创建bridge\ - 打开RN页面前，首先创建一个rn bridge，bridge内部持有了batchBridge对象，bridge初始化时，调用了batchBridge的start方法\ - 启用TurboModule时，需要开发者实现RCTCxxBridgeDelegate协议，所以这里会调用jsExectorFactoryForBridge方法![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec8dc807b5ee46588fad529da4c71d9e~tplv-k3u1fbpfcp-zoom-1.image)\ - RCTCxxBridgeDelegate协议的jsExecutorFactoryForBridge方法，可以指定js引擎，如Hermes引擎或jsc引擎，如果未实现，默认使用jsc引擎\ - 创建TurboModuleManager\ - 在创建JSExecutorFactory前，创建了TurboModuleManager对象，并把bridge与TurboModuleManager对象做了绑定![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/24693e9c1f604466822de6382e9a8a3f~tplv-k3u1fbpfcp-zoom-1.image)\ - TurboModuleManager实现了RCTTurboModuleRegistry协议，故名思义，它的作用是管理项目中的turbo module的注册和查询![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b889acccf7644ecbc4ca97597470d23~tplv-k3u1fbpfcp-zoom-1.image)\ - RCTTurboModuleRegistry协议允许管理其它的TurboModule，提供了moduleForName、moduleIsInitialized这样的方法![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3ea61cf164a49868d0d7678d9d942db~tplv-k3u1fbpfcp-zoom-1.image)\ - TurboModuleBinding创建\ - 创建JSExecutorFactory\ - 执行js代码的抽象类，其子类如JSCExecutorFactory使用jsc引擎，HermesExecutorFactory使用Hermes引擎\ - bridge初始化的最后阶段，执行闭包RCTJSIExecutorRuntimeInstaller![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9e903e93c894e629ca13e7e81543f7d~tplv-k3u1fbpfcp-zoom-1.image)\ - 执行TurboModuleManager.installJSBindingWithRuntimeExecutor方法\ - 创建闭包turboModuleProvider\ - 它是__turboModuleProxy桥接中的c++侧的实现方法\ - turboModuleProvider内部将根据module name返回module实例\ - 执行TurboModuleBinding.install方法\ - 建立c++与js的桥接![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b18ee770ac745f083517571b4c7483f~tplv-k3u1fbpfcp-zoom-1.image)\ - 建立__turboModuleProxy桥接\ - 往js侧全局global添加一个名叫__turboModuleProxy的方法![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a5e4e71d94534636b971de493db67164~tplv-k3u1fbpfcp-zoom-1.image)\ - jsProxy方法其实是调用前面创建的turboModuleProvider block，根据module name 查找/创建turbo module![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f9637bb915b4e4386c8b3ac4eed10c3~tplv-k3u1fbpfcp-zoom-1.image)\ - moduleProvider_是在install方法中作为参数传进来的，install方法中实例化了TurboModuleBinding对象，入参便是moduleProvider，所以最终执行的是前面创建的闭包turboModuleProvider![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c9e1c9ffc91e400abd47fc06af2c48ce~tplv-k3u1fbpfcp-zoom-1.image)\ - js侧调用trubomoudule\ - 以官方demo为例，当外层import此模块时，调用TurboModuleRegistry.get方法![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa6d674685ee439cb12b647eaef6056f~tplv-k3u1fbpfcp-zoom-1.image)\ - 最终会调用__turboModuleProxy桥接，通过name查找到对应的原生模块![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6872155dbc2944fcb7fd7f96d2fdcb9c~tplv-k3u1fbpfcp-zoom-1.image)\ - c++侧获取turbomodule实例\ - __turboModuleProxy桥接被触发时，c++侧会执行预先定义的moduleProvider方法![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/633400672bfc481ebc4f90ee0b30c453~tplv-k3u1fbpfcp-zoom-1.image)\ - jsProxy方法根据传入的name查找对应的turbomodule\ - jsProxy内部又调用了其它方法，最终走到了provideTurboModule\ - provideTurboModule根据name获取turbo module\ - 主要有三步![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f68c0a7d4df84e73b3ca4b58fb209e65~tplv-k3u1fbpfcp-zoom-1.image)\ - 首先查找缓存，之前创建过该turbomodule对象，则直接返回\ - 第二步优先创建c++ module\ - 第三步创建平台指定的module\ - TurboModule\ - TurboModule是HostObject的子类，HostObject 是从 C/C++ 向 JavaScript 映射过去的对象。所以js也能访问/操作TurboModule![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f34638d27d3145e080a4fd8b1f56890c~tplv-k3u1fbpfcp-zoom-1.image)\ - 参考资料\ - \ - \ -