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
《React Native 新架构实战课》,新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(7)
- 最新
- 精选
- Aaaaaaaaaaayou为什么 Fiber Tree diff 完后还要再Diff Shadow Tree?2023-02-08归属地:广东22
- 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归属地:广东
收起评论