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版本	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 方法