当前位置: 首页 > news >正文

React native新架构组成

React Native 的新架构(New Architecture)引入了一些新的组件和概念,旨在提高性能、增强灵活性和简化跨平台开发。主要组成部分包括:

Fabric:

Fabric Renderer: Fabric 是新的渲染引擎,它旨在取代现有的渲染引擎。与现有渲染引擎相比,Fabric 更高效,并且能够更好地支持异步渲染。
Concurrent Rendering: Fabric 支持并发渲染,使得 React 能够在后台异步计算组件树,并在主线程有空闲时进行渲染。这种方式可以显著提高应用的响应速度和流畅度。
Direct Communication: Fabric 允许更直接的通信途径,从而减少 JavaScript 和原生代码之间的桥接开销。

TurboModules:

TurboModules: 这是新的模块系统,旨在取代现有的原生模块系统。TurboModules 通过 JSI(JavaScript Interface)直接访问原生代码,减少了桥的开销,提供了更高效的模块调用。
Lazy Loading: TurboModules 支持懒加载,仅在需要时加载模块,从而减少启动时间和内存使用。
JSI (JavaScript Interface):

JSI Bridge:

JSI 是一层新的接口,取代了现有的桥接机制。它允许 JavaScript 代码直接调用 C++,以及 C++ 直接调用 JavaScript 函数。这种方式提高了性能和灵活性。
Direct Memory Access: JSI 允许 JavaScript 直接访问内存中的数据,而无需通过桥进行序列化和反序列化。

Codegen:

Code Generation: Codegen 是一个工具,用于自动生成 JavaScript 和原生代码之间的绑定代码。这使得跨平台开发更加方便,并且减少了手动编写绑定代码的错误风险。
Type Safety: Codegen 利用 TypeScript 和 Flow 提供的类型系统,确保生成的代码类型安全,减少运行时错误。

Hermes:

Hermes Engine: Hermes 是一个优化的 JavaScript 引擎,专为 React Native 应用设计。它可以显著减少应用的启动时间和内存使用。
Ahead-of-Time Compilation (AOT): Hermes 支持 AOT 编译,将 JavaScript 代码提前编译成字节码,从而提高执行效率。

总结

React Native 新架构的主要部分包括:

Fabric: 新的渲染引擎,支持并发渲染和更直接的通信。
TurboModules: 新的模块系统,通过 JSI 提供更高效的模块调用。
JSI (JavaScript Interface): 新的接口层,允许 JavaScript 和 C++ 之间的直接调用。
Codegen: 自动生成 JavaScript 和原生代码之间的绑定代码。
Hermes: 一个优化的 JavaScript 引擎,支持 AOT 编译。
这些改进旨在提高 React Native 应用的性能、增强开发体验和简化跨平台开发。

相关文章:

  • SQL server with方法修改
  • 两个src案例分享
  • SpringMVC框架学习笔记(八):自定义拦截器和异常处理
  • 第二十五篇——信息加密:韦小宝说谎的秘诀
  • R可视化:微生物相对丰度或富集热图可视化
  • RISC_CPU模块的调试
  • 开发一个python工具,pdf转图片,并且截成单个图片,然后修整没用的白边
  • MyBatis打印不带问号SQL
  • 电子书(chm)-加载JS--CS上线
  • 鸿蒙开发组件:【FA模型的Context】
  • 【html5的video标签在移动端的使用】【微信内部浏览器video自动播放】【vue-video-player】
  • 用ip link add link命令创建vlan子设备
  • 【踩坑】修复Ubuntu远程桌面忽然无法Ctrl C/V复制粘贴及黑屏
  • VMware清理拖拽缓存
  • Avalonia for VSCode
  • Create React App 使用
  • HTML中设置input等文本框为不可操作
  • JavaScript类型识别
  • JS专题之继承
  • MaxCompute访问TableStore(OTS) 数据
  • Nodejs和JavaWeb协助开发
  • php的插入排序,通过双层for循环
  • Redis学习笔记 - pipline(流水线、管道)
  • redis学习笔记(三):列表、集合、有序集合
  • storm drpc实例
  • vue--为什么data属性必须是一个函数
  • 码农张的Bug人生 - 见面之礼
  • 探索 JS 中的模块化
  • 腾讯优测优分享 | Android碎片化问题小结——关于闪光灯的那些事儿
  • 再次简单明了总结flex布局,一看就懂...
  • ionic异常记录
  • 整理一些计算机基础知识!
  • ​LeetCode解法汇总2670. 找出不同元素数目差数组
  • # 利刃出鞘_Tomcat 核心原理解析(二)
  • #laravel 通过手动安装依赖PHPExcel#
  • %3cscript放入php,跟bWAPP学WEB安全(PHP代码)--XSS跨站脚本攻击
  • (3)nginx 配置(nginx.conf)
  • (编程语言界的丐帮 C#).NET MD5 HASH 哈希 加密 与JAVA 互通
  • (创新)基于VMD-CNN-BiLSTM的电力负荷预测—代码+数据
  • (分享)自己整理的一些简单awk实用语句
  • (附源码)spring boot校园拼车微信小程序 毕业设计 091617
  • (附源码)springboot优课在线教学系统 毕业设计 081251
  • (附源码)ssm智慧社区管理系统 毕业设计 101635
  • (附源码)计算机毕业设计ssm基于Internet快递柜管理系统
  • (含答案)C++笔试题你可以答对多少?
  • (汇总)os模块以及shutil模块对文件的操作
  • (四)React组件、useState、组件样式
  • .htaccess 强制https 单独排除某个目录
  • .Net Redis的秒杀Dome和异步执行
  • .NET Remoting学习笔记(三)信道
  • .NET Standard 支持的 .NET Framework 和 .NET Core
  • .NET/ASP.NETMVC 大型站点架构设计—迁移Model元数据设置项(自定义元数据提供程序)...
  • .net使用excel的cells对象没有value方法——学习.net的Excel工作表问题
  • :“Failed to access IIS metabase”解决方法
  • [04]Web前端进阶—JS伪数组