深度解析React Native底层核心架构

React Native 工作原理深度解析

一、核心架构:三层异构协作体系

React Native 的跨平台能力源于其独特的 JS层-Shadow层-Native层 架构设计,三者在不同线程中协同工作:

  1. JS层
    运行于JavaScriptCore(iOS)或Hermes(Android)引擎,负责业务逻辑与UI布局计算。开发者编写的React组件在此生成虚拟DOM树,并通过 Flexbox布局系统 完成跨平台适配。此层采用 异步事件驱动模型 ,通过事件循环机制处理用户交互、网络请求等异步操作。

  2. Shadow层
    作为中间表示层,由C++实现的 Yoga引擎 负责将Flexbox布局转换为平台特定的坐标系数据。此层维护 虚拟DOM树的轻量副本 ,通过 Diff算法 计算最小变更集,避免全量渲染带来的性能损耗。例如,当JS层检测到<View>组件的位置变化时,Shadow层仅更新受影响节点的布局属性。

  3. Native层
    调用原生UI组件(iOS的UIView/Android的View)进行最终渲染。通过 平台适配器 将虚拟DOM指令转化为原生API调用,如将React的<Text>组件映射为iOS的UILabel或Android的TextView。此层直接访问设备硬件(如GPU渲染管线),确保动画流畅度可达60FPS。


二、通信机制演进:从异步桥接到同步直连

1. 旧架构的Bridge模式(2015-2022)

Bridge 是 JavaScript 与原生代码通信的核心枢纽,采用 ​异步消息队列+序列化机制 实现跨平台交互

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Bridge"桥接"使这一切成为可能,它使得react可以调用宿主平台开放的UI组件。react组件通过render方法返回了描述界面的标记代码。

  1. web平台:react最终将标记代码解析成浏览器的dom
  2. react native中:标记代码会被解析成特定平台的组件 如组件将会表现为iOS平台的UIView
通信流程原理

与跨语言模型的调用思路类似

1. JS 调用 Native 模块
// JS 调用示例
NativeModules.CalcModule.add(2, 3, (result) => console.log(result));

其底层执行流程如下:
序列化阶段
JS 线程将方法名 add、参数 (2,3) 和回调函数序列化为 JSON 对象,格式形如:
{ module: 'CalcModule', method: 'add', args: [2,3], callbackId: 123 }
跨线程传递
消息通过 单线程消息队列 传递到 Native 主线程,期间触发多次线程切换(JS 线程 → Bridge 队列 → UI 线程)。
反序列化执行
Native 层根据 module/method 查找注册表,将 JSON 参数反序列化为原生数据类型(如 NSInteger),执行 add: 方法实现。
回调处理
计算结果再次通过序列化传回 JS 线程,触发 callbackId 对应的 JS 函数。

2. Native 调用 JS 模块

反向通信通过 事件订阅机制 实现:
• Native 模块调用 RCTEventEmitter 发送事件,携带序列化后的数据包。
• JS 端的 NativeEventEmitter 监听并解析事件,触发对应的 React 组件状态更新。

核心设计特性
异步批处理机制

通过 JSON序列化 传递消息,JS与Native的通信需经过:

序列化JSON
反序列化
JS线程
消息队列
UI主线程

典型延迟可达100ms+,复杂列表滚动时丢帧率高达30%。
自动合并 16ms 内的 UI 更新指令,减少跨线程通信次数

​类型映射

基础类型(数字/字符串)直接转换,复杂对象(如数组/字典)通过序列化传输

线程隔离模型

JS 线程与 UI 主线程分离,避免阻塞用户交互.UI 主线程是 Native 层的原生线程,而 JS 线程是 React Native 运行时创建的独立线程。两者的分离设计既保障了原生平台的交互流畅性,又为 JavaScript 动态逻辑提供了执行环境。
在这里插入图片描述
☆ ☆ ☆通过 JSON 序列化异步通信,JS 线程将 UI 更新指令发送到 Shadow 线程,再转发至 UI 主线程

JS 线程的独立性
JS 线程由 React Native 运行时创建,独立于 UI 主线程运行,主要负责: 执行 JavaScript代码(如业务逻辑、React 组件渲染逻辑);
生成虚拟 DOM 树(Element Tree)并计算布局差异
shadow线程
渲染到界面上一个很重要的步骤就是布局,我们需要知道每个组件应该渲染到什么位置,这个过程就是通过yoga去实现的,这是一个基于flexbox的跨平台布局引擎。shadow thread 会维护一个 shadow tree来计算我们的各个组件在 native 页面的实际布局,然后通过 bridge 通知native thread 渲染 ui
native 线程(UI)
主要负责原生渲染和调用原生能力;

性能瓶颈分析
序列化开销

复杂参数(如大数组)的 JSON 序列化耗时占总通信时间的 70%+,实测 1MB 数据序列化延迟可达 30ms。

单线程队列阻塞

高并发场景(如列表快速滚动)导致消息堆积,Android 设备平均延迟达 100ms+。

​内存占用

每个 Bridge 实例需维护独立的消息队列和模块注册表,多页面应用内存开销增加 20%-30%

2. 新架构组件和设计理念

好文推荐:React Native 新架构:性能提升的全面解析

React Native 新架构通过 ​Fabric、Turbo Modules、JSI 和 Codegen 四大支柱重构了底层体系,实现了从异步桥接到原生能力直连的跨越式升级:
在这里插入图片描述

Fabric架构的突破性创新(渲染引擎)
1. 并发渲染体系

优先级调度
通过 RenderPass机制 将渲染任务分为:
High Priority:交互动画(如滑动列表)
Normal Priority:常规布局更新
Low Priority:预加载内容
实测复杂动画场景下的丢帧率降低40%。

2. 分层渲染技术

LayerTree结构
将UI拆分为 Surface/Canvas/Text 等独立渲染层,支持局部更新。例如文本内容变更时,仅重绘Text层而非整个View。

内存共享优化
采用 SharedArrayBuffer 实现跨线程数据共享,减少60%的内存拷贝。如在处理4K图像时,显存占用从120MB降至50MB。

3. 原生渲染管线

Compositor组件
将渲染指令转化为 Metal(iOS)/Vulkan(Android) 的GPU指令,实现跨平台的高效合成。例如,圆角阴影效果通过GPU着色器而非CPU计算实现。

JSI(JavaScript Interface)

☆ ☆ ☆ JS 线程通过 JSI 直接持有 Native 对象引用,支持同步调用 Native 方法,减少通信延迟

1.同步直连机制

通过C++实现的 JavaScript Interface (JSI) ,允许JS直接持有Native对象引用:

// JSI绑定示例
jsi::Function::createFromHostFunction(runtime,jsi::PropNameID::forAscii(runtime, "nativeMethod"),2,[](jsi::Runtime& rt, const jsi::Value& thisVal, const jsi::Value* args, size_t count) {// 直接调用原生方法nativeModule->method(args[0].asString(rt).utf8(rt));return jsi::Value::undefined();}
);

实测Android TV的复杂列表渲染时间从120ms降至50ms。

​2.内存共享机制

采用SharedArrayBuffer实现跨线程数据共享,4K图像处理显存占用减少58%(120MB→50MB)

模块系统:Turbo Modules的动态加载
1. 按需加载机制

动态注册
模块在首次调用时加载,冷启动时间减少30%。例如支付模块仅在用户进入结算页时初始化。
生命周期管理
采用 引用计数+弱引用 策略,模块闲置时自动释放内存。实测模块内存泄漏率下降90%。

2. 类型安全接口
Codegen生成的ABI代码

支持C++/Java/Obj-C三端类型校验,消除跨语言调用错误。例如参数类型错误从运行时崩溃转为编译期报错。

​1.强类型约束

基于TypeScript类型定义自动生成JSI绑定代码,减少80%跨语言调用错误;

​2.多平台适配

支持iOS/Android/Windows/macOS统一代码生成,生态组件开发效率提升50%


三.性能优化关键技术

1. 渲染效率提升

​核心布局引擎升级Yoga→CoreLayout引擎,复杂布局计算耗时从20ms降至5ms(SIMD指令加速);
​内存管理革新:Hermes引擎分层GC策略,低端设备GC停顿时间从200ms降至60ms。

2. 通信延迟优化

​同步调用体系:手势识别等实时交互场景延迟<5ms,较旧架构(100ms+)提升20倍;
​批量更新策略:自动合并16ms内的UI变更指令,减少30%无效重绘。

3. 实测性能数据

在这里插入图片描述

四、未来演进方向

  1. AI辅助开发
    React Native 18集成 GPT-4代码生成器 ,可将设计稿自动转化为JSX代码,布局准确率达95%。
  2. WebAssembly支持
    通过 RN-WASM插件 运行C++/Rust模块,图像处理性能提升5倍。
  3. 跨端扩展
    适配AR/VR平台的 ReactXR框架 ,支持Meta Quest/Apple Vision Pro等设备。
  4. 渐进式迁移路径
    ​兼容层设计:旧模块通过Interop Layer与新架构共存,降低迁移成本;
    ​关键步骤:

升级React 18+并启用并发模式
使用Codegen重构原生模块接口
采用Fabric渲染器替换传统组件树


设计哲学启示

总结:架构演进的核心逻辑
新架构通过 ​性能三角平衡法则 —— 开发效率(JS动态性)、执行性能(JSI直连)、生态兼容性(多平台适配)—— 实现了质的突破。

  1. 优先采用Fabric+JSI组合:避免旧Bridge的序列化与线程切换瓶颈 ​
  2. 活用Turbo Modules动态加载:支付/相机等重型模块按需初始化 ​
  3. 拥抱Codegen类型安全:减少跨语言开发的调试成本

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/34614.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端内存优化实战指南:从内存泄漏到性能巅峰

前端内存优化实战指南&#xff1a;从内存泄漏到性能巅峰 一、内存问题引发的场景 1.1 典型内存灾难现场 // 经典内存泄漏示例 const zombieElements new Set();function createLeak() {const div document.createElement(div);zombieElements.add(div); // 元素永不释放div…

【工作记录】pytest使用总结

1、 fixture夹具 可参考&#xff1a; python3.x中 pytest之fixture - 漂泊的小虎 - 博客园 fixture是指夹具&#xff08;把用例夹在中间&#xff09;&#xff0c;它包括前置工作和后置工作&#xff0c;前置是用例代码的准备阶段&#xff0c;后置是用例执行之后的清理阶段,用…

C++基础笔记

1. C关键字 这个不多说&#xff0c;以后接触得到&#xff0c;但这里做个总结&#xff1a; 2. 命名空间 一般类型&#xff1a; namespace Xianyu {// 命名空间中可以定义变量/函数/类型int rand 10;int Add(int left, int right){return left right;}struct Node{struct No…

生活中的可靠性小案例12:类肤材质老化发粘问题

我一直觉得我买的某品牌车载吸尘器很好用&#xff0c;用了几年&#xff0c;目前性能也是杠杠的。然而它现在有个最大的问题&#xff0c;就是表面发粘了&#xff0c;用起来粘手&#xff0c;非常不舒服。 这一类问题在生活中不少见&#xff0c;尤其是一些用了类肤材质涂层的物件。…

黑马node.js教程(nodejs教程)——AJAX-Day01-04.案例_地区查询——查询某个省某个城市所有地区(代码示例)

文章目录 代码示例效果 代码示例 axiosTest.html <!DOCTYPE html> <!-- 文档类型声明&#xff0c;告诉浏览器这是一个HTML5文档 --> <html lang"en"> <!-- HTML根元素&#xff0c;设置文档语言为英语 --><head> <!-- 头部区域&am…

Ollama+OpenWebUI本地部署大模型

OllamaOpenWebUI本地部署大模型 前言Ollama使用Ollama安装Ollama修改配置Ollama 拉取远程大模型Ollama 构建本地大模型Ollama 运行本地模型&#xff1a;命令行交互Api调用Web 端调用 总结 前言 Ollama是一个开源项目&#xff0c;用于在本地计算机上运行大型语言模型&#xff0…

【NeurIPS 2024】LLM-ESR:用大语言模型破解序列推荐的长尾难题

标题期刊年份关键词LLM-ESR: Large Language Models Enhancement for Long-tailed Sequential RecommendationNeurIPS2024Large Language Models, Sequential Recommendation, Long-tailed &#x1f4da;研究背景 在电商和社交媒体的世界里&#xff0c;序列推荐系统&#xff…

C语言_数据结构总结9:树的基础知识介绍

1. 树的基本术语 - 祖先&#xff1a;考虑结点K&#xff0c;从根A到结点K的唯一路径上的所有其它结点&#xff0c;称为结点K的祖先。 - 子孙&#xff1a;结点B是结点K的祖先&#xff0c;结点K是B的子孙。结点B的子孙包括&#xff1a;E,F,K,L。 - 双亲&#xff1a;路径上…

Android 14 Telephony 网络选择功能介绍

一、总体介绍 (一)功能 手动搜网的流程:用户通过UI触发,调用TelephonyManager的API,比如startNetworkScan,然后这个请求会传递到RIL层,通过AT命令与基带通信,进行网络扫描。结果返回后,经过TelephonyRegistry通知应用层。中间可能涉及IPC,比如Binder通信,因为应用和…

系统思考全球化落地

感谢加密货币公司Bybit的再次邀请&#xff0c;为全球团队分享系统思考课程&#xff01;虽然大家来自不同国家&#xff0c;线上学习的形式依然让大家充满热情与互动&#xff0c;思维的碰撞不断激发新的灵感。 尽管时间存在挑战&#xff0c;但我看到大家的讨论异常积极&#xff…

位运算(基础算法)

按位与AND&#xff08; & &#xff09; 只有当两个位都为1时&#xff0c;结果才为1,否则为0。结果不会变大 按位或 OR&#xff08; | &#xff09; 只有当两个位中有一个为1时&#xff0c;结果才为1,否则为0。结果不会变小 按位异或 XOR &#xff08; ^ &#xff09; 只…

规模效应的三重边界:大白话解读-deepseek为例

前言&#xff1a;当Scaling Laws遇见边际递减效应 在人工智能的狂飙突进中&#xff0c;大语言模型如同不断膨胀的星体&#xff0c;吞噬着海量算力与数据。OpenAI于2020年揭开的Scaling Laws&#xff0c;曾为这场盛宴指明方向&#xff1a;模型性能随参数规模&#xff08;N&…

力扣143重排链表

143. 重排链表 给定一个单链表 L 的头节点 head &#xff0c;单链表 L 表示为&#xff1a; L0 → L1 → … → Ln - 1 → Ln 请将其重新排列后变为&#xff1a; L0 → Ln → L1 → Ln - 1 → L2 → Ln - 2 → … 不能只是单纯的改变节点内部的值&#xff0c;而是需要实际的…

wow-rag:task3-初步体验问答引擎

做RAG需要自己准备一个txt文档&#xff0c;新建一个docs文件夹&#xff0c;放进去。例如&#xff0c;这里放了一个./docs/问答手册.txt # 从指定文件读取&#xff0c;输入为List from llama_index.core import SimpleDirectoryReader,Document documents SimpleDirectoryRead…

bgp服务器是什么意思

一、基础概念 ‌BGP服务器‌&#xff08;Border Gateway Protocol Server&#xff09;指通过 ‌边界网关协议&#xff08;BGP&#xff09;‌ 实现 ‌多运营商线路智能调度‌ 的服务器&#xff0c;能够自动选择最优路径连接不同网络&#xff08;如电信、联通、移动&#xff09;…

AtCoder Beginner Contest 397(ABCDE)

目录 A - Thermometer 翻译&#xff1a; 思路&#xff1a; 实现&#xff1a; B - Ticket Gate Log 翻译&#xff1a; 思路&#xff1a; 实现&#xff1a; C - Variety Split Easy 翻译&#xff1a; 思路&#xff1a; 实现&#xff1a; D - Cubes 翻译&#xff1a…

unserialize3 [有难度,序列化反序列化知识点]

详情: 地址:https://adworld.xctf.org.cn/challenges/list (unserialize3) 看到题目名称是反序列化 代码审计 <?php class xctf{// 定义一个公有属性$flag&#xff0c;通常CTF题目中需要获取该属性值public $flag 111; // 此处为示例值&#xff0c;实际可能为真实flag/*…

【Linux-传输层协议TCP】TCP协议段格式+确认应答+超时重传+连接管理机制(三次握手、四次挥手、理解TIME_WAIT + CLOSE_WAIT)

TCP协议 TCP全称为“传输控制协议&#xff08;Transmission Control Protocol&#xff09;”人如其名&#xff0c;要对数据的传输进行一个详细的控制。 1.TCP协议段格式 下面是TCP报头各个字段的表格形式&#xff1a; 字段名称字段大小描述源端口16位发送端TCP端口号。目的端…

《AI大模型趣味实战》No2 : 快速搭建一个漂亮的AI家庭网站-相册/时间线/日历/多用户/个性化配色(中)

快速搭建一个漂亮的AI家庭网站-相册/时间线/日历/多用户/个性化配色(中) 摘要 在上一篇文章中&#xff0c;我们介绍了如何搭建一个基础的家庭网站&#xff08;V1.0版本&#xff09;&#xff0c;包含了用户管理、相册管理、时间线和日历等功能。本文将继续深入&#xff0c;详细…

React(二):JSX语法解析+综合案例

事件绑定 this绑定方式 问题&#xff1a;在事件执行后&#xff0c;需获取当前类的对象中相关属性&#xff0c;此时需要this——当打印时&#xff0c;发现this为undefined,这又是为啥&#xff1f; 假设有一个btnClick函数&#xff0c;但它并不是我们主动调用的&#xff0c;而是…