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

36|升新不升旧:自定义组件如何升级到新架构?

你好,我是蒋宏伟。
有同学后台留言说:“我把公司应用升级到了 0.71.8 版本,开启新架构后,一些组件都乱了,折腾了三天最终无奈退回到老架构了。”
这个问题还挺典型的,今天我们就来聊聊到底应该怎么升级?分享一些经验。
在上节课中,我把我们的教学项目 React-Native-Classroom 项目,从 0.68 升级到了 0.72 的新架构,迁移过程十分顺利。这是因为 React-Native-Classroom 项目没有使用自定义模块或组件,它使用的都是官方的或成熟的社区方案,这些方案都对新老架构进行了兼容。所以,无需额外的 Native 代码升级工作。
但是,新旧架构的自定义模块或组件研发方式完全不同。原来那些自己维护的自定义模块或组件,要完全升级成 Turbo Modules 和 Fabric Components 是需要大量的改造工作的。
对于业务而言,研发效率是第一位的。那如何升级新架构,才能降低升级成本呢?
先说结论:升级新架构时不动旧的业务代码,是一个好策略。

老代码是否兼容?

那首先,我们就来测试,老代码不做任何修改,能否直接在新架构上运行?
我参考了官方文档中的老架构部分,分别创建了一个老模块和一个老组件。
老模块是自定义的简化版存储模块 StorageModule。它有两个方法,一个是利用键值对的形式存储字符串,另一个是使用键去读取存储在 Native 端的值。如果存储(SET ITEM)和读取(GET ITEM)成功,那么就说明这类老模块代码能在新架构中直接使用。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文介绍了在升级自定义组件到新架构时所面临的技术挑战以及解决方案。作者首先讨论了老代码在新架构上的兼容性测试,发现自定义模块能够直接使用,但自定义组件需要手动开启兼容模式。然后,作者介绍了官方提供的组件兼容层,并指出它并不完美,但能够支持大部分老架构组件代码的兼容。接着,文章提出了完全迁移到新架构的建议,并详细介绍了在新架构上开发自定义组件的流程。最后,作者强调了新架构带来的性能提升,并建议有时间和资源的团队采用新架构的开发方案。 在技术实现方面,文章详细介绍了在Android平台下创建自定义组件的流程,包括配置build.gradle、运行CodeGen自动生成模板代码、创建CustomView.java、创建CustomViewManager.java以及升级CustomViewPackage.java。同时,文章还展示了如何在React Native中使用这些自定义组件。 总的来说,本文深入浅出地介绍了自定义组件升级到新架构的挑战和解决方案,对于需要进行类似升级的开发团队具有一定的参考价值。

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

全部留言(3)

  • 最新
  • 精选
  • 听说昵称太长了躲在树后面会被别...
    我就是那位折腾了三天退回去的同学,没想到被点名了😂。经过了一年 RN 的折腾我也总结了一些看法,这个折腾过程估计也是很多初尝跨段方案的团队要走的老路。首先不能把 RN 当做客户端最终解决方案,我们当时调研后下的结论:“跨端是未来,原生是辅助”,因为项目初期各部门同事一致不负责的说:怎么快怎么来,能用就行!这给了我们拥抱跨端的勇气。可当加班加点忙完项目上线跑起来终于松一口气时大家口风就变了,因为能用和用到极致是两码事,当开始盈利时跟竞品一对比那必须要用到极致,起初那些不痛不痒的问题在这个阶段就变成了棘手问题,兜兜转转最后又回到了原生,因为不是所有团队都有像宏伟老师这样的团队去做深度优化,所以我们花了很多时间去优化却没折腾出效果,公司没法再忍受我们去研究而不产出了,然后只能用原生把大部分核心功能重写了,只留下少量边边角角的业务用 RN,回过头一看,原本想借助跨端提高生产力,结果反而是降低了生产力,可以说是羊肉没吃到弄了一身骚,原因很简单,一但过了 0 到 1 这个阶段摆在面前只有两条路,要么深入甚至魔改 RN(这没个一年半载门都摸不着),要么用原生开始重构(原生开发组的同事还整天做优化呢,纯 RN 咋个做到极致),如果没有做这到选择题那么大概率我猜你们宣告项目失败甚至到了裁员的边缘,市场机会总是稍纵即逝,项目的失败与技术选项不无关系,这个问题值得深思。总结,得结合自身项目借助 RN 辅助完成一些工作,最好不要一梭哈的把鸡蛋全放 RN 的篮子里,除非你做的是需求明确并且生命周期可预测的项目。另外,这两天在研究原生承载页加载 RN 过慢的问题,安卓低端机得两三秒白屏后才能加载完渲染出来,不知道老师能否加个餐讲一讲怎么优化。
    2023-08-10归属地:福建
    4
    4
  • Forest
    老师后面能扩展react-native服务端渲染方向的相关内容吗?
    2023-11-30归属地:四川
    1
  • 大大小小
    哈哈,我居然是第一个毕业的!
    2023-08-08归属地:江西
    1
收起评论
显示
设置
留言
3
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部