react naive 网络框架源码解析

发布于:2025-05-07 ⋅ 阅读:(16) ⋅ 点赞:(0)

本文取 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 方法