React Native 新架构实战课
蒋宏伟
58 同城前端架构师,58RN 负责人
18214 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 42 讲
React Native 新架构实战课
15
15
1.0x
00:00/00:00
登录|注册

29|弄清现状:新架构预览版究竟长什么样?

你好,我是蒋宏伟。
上一节课,我们使用了三招,也就是“时光机”、“找线头”和“鸟瞰图”,初步了解了 React Native 第一版的老架构长什么样。我们学习第一版 React Native 架构的目标不是为了了解过去,而是为了搞清楚 React Native 新架构的现状,以及新架构未来会去向何方。
因此,今天我们的目标就是承接上一节课讲过的方法,画一张新架构的“鸟瞰图”,看看当前 0.70 版本的新架构预览版究竟是怎么设计的。
在这节课的学习过程中,我们会涉及部分的源码,所以我强烈建议你打开 Xcode 或者 Android Studio 对源码部分进行断点调试,这样才能学得更透彻。

读文章

不过,为了帮你理清楚 React Native 团队的架构设计思路,我想先带你看看官方是怎么介绍新架构的。
在官方对新架构介绍的文章中,你可以看到官方重点提到了新架构的三大件,分别是 Turbo Modules 模块系统、Fabric 组件系统Codegen 代码生成工具
Turbo Modules 模块系统是全新的原生模块系统,代替的是老架构中的 Native Modules。官方文档中的 API,比如 Animated、Platform、Keyboard,在老架构中都是采用 Native Modules 来实现的,在新架构中都改用 Turbo Modules 进行实现了。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

React Native新架构的预览版涉及了Turbo Modules模块系统、Fabric组件系统和Codegen代码生成工具。在新架构中,Turbo Modules取代了Native Modules,Fabric Components取代了Native Components。文章通过分析源码,介绍了新架构中的关键连接点,包括nativeFlushQueueImmediate、__turboModuleProxy和nativeFabricUIManager,以及它们在Bridge、Turbo和Fabric通信方式中的作用。通过这些连接点,实现了JavaScript与Native之间的双向调用。新架构中,Native和JavaScript通过三种方式进行通讯,分别是Bridge、Turbo和Fabric。业务代码中的历史代码依旧走Bridge进行通讯,新代码新项目走Turbo、Fabric进行通信。文章还提到了对Bridge、Turbo和Fabric的测试结果,以及对新架构的思考和预期。作者发现新架构中居然还在调用老架构的Bridge实现通信,这引发了作者的思考。作者推测新架构中还要初始化和使用Bridge的原因,可能是为了方便业务代码迁移,向下兼容了老架构。作者认为新架构中Bridge、Turbo和Fabric的混合使用是一个过渡方案,官方可能会在新架构稳定后,将是否使用Bridge进行兼容的开关暴露给开发者,由开发者进行选择。这些观点为读者提供了对新架构的更深层次的思考和展望。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《React Native 新架构实战课》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(2)

  • 最新
  • 精选
  • 拭心
    升级老架构项目时最关键的 3 个考量点: 1. 是否有足够的性能提升 2. 是否够稳定 3. 客户端和业务方的修改成本

    作者回复: 👍

    2023-02-12归属地:上海
    1
  • 拭心
    升级老架构 RN 项目时最关键的 3 个考量点:
    2023-02-12归属地:上海
收起评论
显示
设置
留言
2
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部