react naive 网络框架源码解析

本文取 react native 两个区别很大的版本做分析(0.76.5、0.53.3)

一、0.76.5 版fetch 全流程排查

1、JS 端的实现

  • 随手写一个fetch,点开。

我们这里常用的还是手机端,因此选择 react-native,react-native-windows 那个是 pc 端

在这里插入图片描述

点开后全是 d.ts 文件
在这里插入图片描述

node_modules/@types/node/globals.d.ts 文件里并没有 fetch 的实现,它主要是一些全局类型定义。

对于 react-native 目录,它的网络模块的 js 部分都是集中在node_modules/react-native/Libraries/Network

因此在此目录下搜索,发现是基于 whatwg-fetch js 库
在这里插入图片描述

按照上图搜索方法,然后在此库中找到了 fetch,fetch 是基于 xhr,而 xhr 由XMLHttpRequest 构造实例对象

在这里插入图片描述

点开XMLHttpRequest 类有多个实现,我们这里紧紧抓住 react-native 库即可,后文会讲到 react-native-windows
在这里插入图片描述

然后又到了 d.ts 的无用环节
在这里插入图片描述

2、原生端实现

whatwg-fetch 中使用的 XMLHttpRequest 是浏览器或 React Native 环境提供的原生 API。

浏览器环境在浏览器环境里,`XMLHttpRequest` 是由浏览器内核实现的,属于浏览器的原生 API。通常是用 C++ 编写的,代码未开源,只能通过W3C 的标准文档看React Native 环境在 React Native 中,`XMLHttpRequest` 是在 `node_modules/react-native/Libraries/Network` 目录下实现的。

然后我们在Libraries/Network中可以看到有个熟悉的 Android.js、IOS.js 跨端文件实现,然后继续点开它

这里有个比较有意思的:绿色框部分 NativeNetworkingAndroid.js 显示成了 NativeNet,说明 working 也属于文件命名的一个默认省略部分,类似于平台indexAndroid.js 会省略成 index.js
在这里插入图片描述

发现这个是基于 TurboModule,这个属于新版 rn 引入的桥接模式,类似于 NativeModule。

在这里插入图片描述

然后我们搜索TurboModule 发现线索不明显,因为TurboModule 属于一个类,导包太多,那么我们猜测导包TurboModule了主要还是使用其原生提供的api 能力,其中最高频的肯定是 sendRequest 方法,因此搜索如下:

发现 2 个文件,上面一个是 java 的方法签名,这个就查看源码无异议,因此我们看下面一个

在这里插入图片描述

打开 sendRequest 方法,发现 一个关键调用 sendRequestInternal
在这里插入图片描述

接着往下面滚动有 okhttp build 的痕迹

在这里插入图片描述

那么对于 okhttp 熟知的都知道,它肯定会构建 OkhttpClient 对象用于网络请求,因此直接搜索OkHttpClient,这里我是先发现了所以直接搜索了OkHttpClient client,到此可以断定此版本的 fetch 方法是基于 okhttp 构建的 xhr 环境实现

在这里插入图片描述

二、0.76.5版axios

经过上文的排查我们知道网络请求肯定会调用 request,因此我们直接在 axios 库中搜索 request,很显然的看到也是调用 XMLHttpRequest,因此axios 也是 okhttp 实现的。

在这里插入图片描述

三、0.53.3版fetch

经过上面的流程我们达成一个共识:

1、它的网络请求 js 端必定会调用 request 方法

2、app 端的核心 sdk 就是集成在 node_module/react-native 目录中

3、XMLHttpRequest 底层由okhttp 实现,它构建了类似 web 的一套环境

因此我们打开0.53.3 项目直接 搜索 request,发现了 OkhttpCallUtil.java,那这个更直接了,不用排查了

在这里插入图片描述

四、react-native-windows 作用

上文讲到 app 端的核心 sdk 就是集成在 node_module/react-native 目录中,那么对于 react-native-windows 干啥的,我们直接搜 request,发现其中最高频使用的文件叫 WinRTHttpResource.cpp。

WinRTHttpResource.cpp 主要基于 Windows 运行时(Windows Runtime,简称 WinRT)框架进行封装,这个与 App 构建的 XHR 有点区别,因此单独抽出一个目录。

在这里插入图片描述

五、总结与收获

react native版本fetchaxios
0.76.5OkhttpOkhttp
0.53.3Okhttp-
  • react native app 端不管是 fetch、axios 都是使用的 okhttp(属于 app 使用 okhttp 构建出来类似于浏览器的 xhr环境)

  • windows 桌面端网络请求基于 winrt,因此会多出一个 react-native-windows 包,而非合并到 react-native目录

  • 搜索源码方便:都会在 js 端调用 request 方法

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

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

相关文章

OpenCV 图形API(81)图像与通道拼接函数-----透视变换函数warpPerspective()

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 对图像应用透视变换。 函数 warpPerspective 使用指定的矩阵对源图像进行变换: dst ( x , y ) src ( M 11 x M 12 y M 13 M 31 x…

深度学习在油气地震资料反卷积中的应用

深度学习在油气地震资料反卷积中的应用 基本原理 在油气地震勘探中,反卷积(Deconvolution)是一种重要的信号处理技术,用于提高地震资料的分辨率。传统方法(如维纳滤波、预测反卷积等)存在对噪声敏感、假设条件严格等局限。深度学习方法通过数据驱动的方…

Java开发者面试实录:微服务架构与Spring Cloud的应用

面试场景 面试官: 请介绍一下你的基本情况。 程序员: 大家好,我叫张小明,今年27岁,硕士学历,拥有5年的Java后端开发经验。主要负责基于Spring Boot开发企业级应用,以及微服务架构的设计和实现。 面试官: 好的&#…

​Spring + Shiro 整合的核心要点及详细实现说明

在 Spring 项目中集成 Apache Shiro 可以实现轻量级的安全控制(认证、授权、会话管理等)。以下是 ​Spring Shiro 整合的核心要点及详细实现说明: 一、Spring 与 Shiro 整合的核心组件 ​组件​​作用​ShiroFilterFactoryBean创建 Shiro 过…

网络编程核心技术解析:从Socket基础到实战开发

网络编程核心技术解析:从Socket基础到实战开发 一、Socket编程核心基础 1. 主机字节序与网络字节序:数据传输的统一语言 在计算机系统中,不同架构对多字节数据的存储顺序存在差异,而网络通信需要统一的字节序标准,这…

SQLark可以支持PostgreSQL了,有哪些新功能?

SQLark(百灵连接)是一款国产的数据库开发和管理工具,用于快速查询、创建和管理不同类型的数据库系统,支持达梦、Oracle 和 MySQL 数据库。 最新发布的 SQLark V3.4 版本新增了对 PostgreSQL 数据库的支持。我试用了一下&#xff…

【全面解析】Poco C++ Libraries 模块详解与使用指南

Poco(The Portable Components) 是一套现代 C 的跨平台开发库,广泛应用于嵌入式系统、服务端程序、工业控制和 AI 后端服务等领域。其设计理念类似于 Java 的标准库,为 C 提供“标准的非标准功能”。 本篇文章将带你全面了解 Poco…

Vue+tdesign t-input-number 设置长度和显示X号

一、需求 Vuetdesign t-input-number 想要设置input的maxlen和显示X号 二、实现 t-input&#xff0c;可以直接使用maxlength和clearable属性 <t-input v-model"value" clearable maxlength10 placeholder"请输入" clear"onClear" blur&q…

(Go Gin)Gin学习笔记(二):路由配置、基本路由、表单参数、上传单个文件、上传多个文件、浅扒路由原理

1. 路由 gin 框架中采用的路优酷是基于httprouter做的 HttpRouter 是一个高性能的 HTTP 请求路由器&#xff0c;适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用&#xff0c;特别适合需要高性能和简单路由的应用场景。 主要特点 显式匹配&#xff1a;与其他路由…

Linux下的好玩的命令

在 CentOS 下&#xff0c;有许多有趣且实用的 Linux 命令&#xff0c;可以帮助你更好地了解系统、提升效率或进行娱乐。以下是一些好玩的 Linux 命令及其说明&#xff1a; 1. cowsay 和 cowthink 功能&#xff1a;让一只牛&#xff08;或其他动物&#xff09;说出你想说的话。…

OpenharmonyOS+RK3568,【编译烧录】

文章目录 1. 摘要 ✨2. 代码下载 &#x1f4e9;3. 编译 &#x1f5a5;️4. 修改&适配 ✂️4.1 编译框架基本概念4.2 vendor & device 目录4.3 内核编译4.3.1 如何修改、适配自己的开发板&#xff1f; 4.4 修改外设驱动 5. 烧录&验证 &#x1f4cb;参考 1. 摘要 ✨ …

深度学习模型优化:如何让数据科学更智能?

深度学习模型优化:如何让数据科学更智能? 一、引言:为什么优化深度学习模型如此重要? 深度学习的应用已经渗透到数据科学的各个领域,从图像识别到自然语言处理,从推荐系统到金融风控,每一个智能模型都依赖于数据驱动的训练。然而,一个模型的性能不仅仅取决于其架构,…

学习Python的第二天之网络爬虫

30岁程序员学习Python的第二天之网络爬虫的信息提取 BeautifulSoup库 地址&#xff1a;https://beautifulsoup.readthedocs.io/zh-cn/v4.4.0/ 1、BeautifulSoup4安装 在windows系统下通过管理员权限运行cmd窗口 运行pip install beautifulsoup4 测试实例 import requests…

n8n 键盘快捷键和控制键

n8n 键盘快捷键和控制键 工作流控制键画布操作移动画布画布缩放画布上的节点操作选中一个或多个节点时的快捷键 节点面板操作节点面板分类操作 节点内部操作 n8n 为部分操作提供了键盘快捷键。 工作流控制键 Ctrl Alt n&#xff1a;创建新工作流Ctrl o&#xff1a;打开工作…

keil+vscode+腾讯ai助手

嵌入式软件开发 这个是之前一直想写的开发方式&#xff0c;不过上份工作一直在忙&#xff0c;没有抽出时间花在上面&#xff0c;现在空下来好好写一写吧&#xff01;标题软件安装 关于VSCode以及Keil的安装可以在以下链接中点击浏览 VSCode安装 Keil5安装 CubeMx安装 插件下…

Unity教程(二十三)技能系统 投剑技能(上)基础实现

Unity开发2D类银河恶魔城游戏学习笔记 Unity教程&#xff08;零&#xff09;Unity和VS的使用相关内容 Unity教程&#xff08;一&#xff09;开始学习状态机 Unity教程&#xff08;二&#xff09;角色移动的实现 Unity教程&#xff08;三&#xff09;角色跳跃的实现 Unity教程&…

Oracle01-入门

零、文章目录 Oracle01-入门 1、Oracle简介 &#xff08;1&#xff09;数据库基础 数据库基础请参考&#xff1a;https://blog.csdn.net/liyou123456789/article/details/131207068 &#xff08;2&#xff09;Oracle是什么 ORACLE 数据库系统是美国 ORACLE 公司&#xff…

springboot集成mybatis-plus详细使用

以下是 Spring Boot 集成 MyBatis-Plus 的详细步骤&#xff1a; 创建 Spring Boot 项目 可使用 Spring Initializr 快速创建项目&#xff0c;添加相关依赖。 引入依赖 在项目 pom.xml 文件中添加以下依赖&#xff1a; <!-- MyBatis-Plus 启动依赖 --> <dependenc…

【wsl】命令说明,wsl的虚拟机ubuntu十分好用

wsl官方说明地址 wsl虚拟机安装简单方便&#xff0c;十分推荐。 安装 在上方的官网链接有安装办法和各种操作指南&#xff0c;在此不再赘述。 安装wsl后从微软商店搜索ubuntu点击后就能直接安装虚拟机镜像&#xff0c;多快好省。 wsl命令 阅读官网文档时发现wsl十分强大 …

Open CASCADE学习|判断一点与圆弧的位置关系

一、引言 在计算机辅助设计&#xff08;CAD&#xff09;、计算机图形学以及机械制造等众多领域中&#xff0c;经常需要处理几何图形之间的位置关系判断问题。其中&#xff0c;判断一个点与圆弧的位置关系是一个基础且重要的任务。Open CASCADE 作为一个强大的开源几何建模内核…