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

32|Fabric:新渲染器的演进之路

你好,我是蒋宏伟。
对核心渲染流程的持续迭代和优化,是 React Native 能够广受欢迎的重要原因之一。
Fabric 是 React Native 新架构渲染器的名字。今天,这一讲我不仅要给你介绍 Fabric 渲染器的核心技术原理,更想让你通过渲染器的演变升级过程,了解该过程中 React Native 技术团队每次大升级背后的思考过程。希望这些优秀框架背后的升级思考,以及对技术极致追求的精神,能够给你带去启发。
为了便于你理解 Fabric 新渲染器是如何演变而来的,我会先和你介绍一个假想的简化版渲染器,接着再带你回顾 React Native 老架构渲染器的工作原理,最后再告诉你 Fabric 新架构渲染器是如何设计的。

简版渲染器

时至今日,在 React Native 开源之初的宏大愿景依旧打动着我:将现代 Web 技术引入移动端(Bringing modern web techniques to mobile)。
Web 开发历史悠久,沉淀了诸多优秀实践和基础设施。随着 React Web 框架的出现,将现代 Web 中积累的开发理念,以及语言、框架、规范和生态等引入移动端,统一各端基础设施,必然能够整体降低移动端学习和开发成本。这是该理念如此打动我的原因。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

React Native的渲染器一直在不断演进和优化,其中Fabric渲染器是对老渲染器的重构升级。文章通过介绍简版渲染器、老架构渲染器和Fabric新渲染器的演变过程,展现了React Native技术团队在持续迭代和优化核心渲染流程的思考和努力。在这个过程中,渲染器的核心责任始终是将声明的组件转换为最终原生API的调用,而升级所带来的是开发者体验和性能提升,以及用户体验的改善。Fabric渲染器的转换过程涉及到Element Tree、Fiber Tree和Shadow Tree三棵树,这些都是Fabric渲染器的核心技术原理。整体而言,本文通过介绍React Native渲染器的演变过程,展现了对技术极致追求的精神,为读者提供了对React Native技术发展的深入了解和启发。 文章通过介绍React Native渲染器的演变过程,展现了对技术极致追求的精神,为读者提供了对React Native技术发展的深入了解和启发。Fabric渲染器的转换过程涉及到Element Tree、Fiber Tree和Shadow Tree三棵树,这些都是Fabric渲染器的核心技术原理。Fabric渲染器使用的是React 16以上版本,通过Fiber的能力,降低了大批量渲染卡顿的可能性。多线程模型支持了6种不同优先级的渲染模式,由此可针对不同场景采用不同的渲染方案,进一步减少了卡顿的几率。因此,我们可以说Fabric新渲染器就是对老渲染器在开发体验和渲染性能上的演化升级。

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

全部留言(7)

  • 最新
  • 精选
  • Aaaaaaaaaaayou
    为什么 Fiber Tree diff 完后还要再Diff Shadow Tree?
    2023-02-08归属地:广东
    2
    2
  • Geek_1de763
    所以新架构应用6讲没了?
    2023-05-02归属地:广东
    1
  • 听说昵称太长了躲在树后面会被别...
    老师你好,有个新架构的问题想请教下,TurboModule 和 Fabric 怎么向 JS 端发送消息?我把公司应用升级到 0.71.8 并开启新构架后折腾了三天最终无奈退回到老架构了,TextInput 不可用、触摸事件也乱了,这些都通过 ref 操作和自定义封装触摸组件解决,但是最困惑我的问题是 TurboModule 和 Fabric 怎么发送消息给 RN 端?官方文档翻遍了没看到相关介绍,还有原生代码在新构架只能解耦出来做成单独的 NPM 包吗,我们大量老构架的原生组件都是直接在 Android/IOS 工程下写的,没办法解耦出来成单独 NPM 包。
    2023-05-19归属地:福建
    1
  • jing
    +催更
    2023-05-13归属地:广东
  • jing
    催更
    2023-05-13归属地:广东
  • 大大小小
    怎么不更新了?
    2023-05-09归属地:广东
  • Geek_781ef0
    老师,还剩3讲,剩下的题目会是什么?催更!
    2023-02-26归属地:广东
收起评论
显示
设置
留言
7
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部