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 应用的性能、增强开发体验和简化跨平台开发。

相关推荐
早點睡3903 小时前
高级进阶 React Native 鸿蒙跨平台开发:react-native-svg(CAPI) 矢量图形代码指南
react native·react.js·harmonyos
熊猫钓鱼>_>12 小时前
【开源鸿蒙跨平台开发先锋训练营】Day20 React Native 鸿蒙开发全阶段大复盘:从零到一的跨越
react native·开源·react·harmonyos·鸿蒙·openharmony·native
熊猫钓鱼>_>13 小时前
【开源鸿蒙跨平台开发先锋训练营】Day 12:全场景适配与异常防护——构建高可靠的鸿蒙跨端体验
react native·ui·华为·开源·app·harmonyos·鸿蒙
lbb 小魔仙14 小时前
【HarmonyOS】React Native实战项目+自定义Hooks开发指南
react native·华为·harmonyos
lbb 小魔仙14 小时前
【HarmonyOS】React Native实战项目+输入格式化掩码Hook
react native·华为·harmonyos
lbb 小魔仙14 小时前
【HarmonyOS】React Native实战项目+关键词高亮搜索Hook
react native·华为·harmonyos
星空222315 小时前
【HarmonyOS】DAY25:React Native for OpenHarmony 日期选择功能完整实现指南
react native·华为·harmonyos
熊猫钓鱼>_>15 小时前
【开源鸿蒙跨平台开发先锋训练营】Day 13:React Native 开发轻量级页面快速响应实践
人工智能·react native·华为·开源·harmonyos·鸿蒙·移动端
lbb 小魔仙15 小时前
【HarmonyOS】React Native实战项目+智能文本省略Hook开发
react native·华为·harmonyos
_pengliang15 小时前
react native expo 开发 ios经验总结
react native·react.js·ios