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

react naive 网络框架源码解析

news 来源：原创 2025/8/19 2:04:50

本文取 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版本	fetch	axios
0.76.5	Okhttp	Okhttp
0.53.3	Okhttp	-

react native app 端不管是 fetch、axios 都是使用的 okhttp（属于 app 使用 okhttp 构建出来类似于浏览器的 xhr环境）
windows 桌面端网络请求基于 winrt，因此会多出一个 react-native-windows 包，而非合并到 react-native目录
搜索源码方便：都会在 js 端调用 request 方法

一、0.76.5 版fetch 全流程排查

1、JS 端的实现

2、原生端实现

二、0.76.5版axios

三、0.53.3版fetch

四、react-native-windows 作用

五、总结与收获

相关文章：