对于前端资讯比较敏感的同学，可能这两天已经听说了 GoogleChromeLabs/quicklink 这个项目：它由 Google 公司著名开发者 Addy Osmani 发起，实现了：在空闲时间预获取页面可视区域内的链接，加快后续加载速度。 如果你没有听说过 Addy Osmani 大神的名号，但对于他的多篇演讲或文章：

The Cost Of JavaScript In 2018，

以及著作书籍：

Learning JavaScript Design Patterns

等，也许你并不陌生。大神出品，必属精品，Google 团队 quicklink 项目一经推出便吸睛无数。

该库面向原生 JavaScript，利用浏览器众多特性，设计巧妙而实用。可是，如果我们的项目基于 React/React Native，如何利用 quicklink，实现页面秒开呢？ 相信不止一个开发者会有此疑问，该仓库 issue 中便有一位巴基斯坦老兄问到：How to use with react-native?

为此，我实现了一个 react-quicklink-component，专门解决此问题：让基于 React/React Native 的项目无缝对接到 Google quicklink。

开始之前，请允许我插播一条广告～

从去年起，我和知名技术大佬颜海镜开始了合著之旅，今年我们共同打磨的书籍 《React 状态管理与同构实战》 终于正式出版了！这本书以 React 技术栈为核心，在介绍 React 用法的基础上，从源码层面分析了 Redux 思想，同时着重介绍了服务端渲染和同构应用的架构模式。书中包含许多项目实例，不仅为用户打开了 React 技术栈的大门，更能提升读者对前沿领域的整体认知。

如果各位对图书内容或接下来的内容感兴趣，还望多多支持！文末有详情，不要走开！

quicklink 到底是什么？实现原理解析

这个 WebPageTest demo 演示了 quicklink 的预获取功能，它将页面加载性能提高了 4 秒！ Youtube 视频见此处。

实现原理很简单，quicklink 主要通过以下方式加快后续页面的加载速度：

检测视区中的链接（使用 Intersection Observer https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API）
等待浏览器空闲（使用 requestIdleCallback https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback）
检查用户是否处于慢速连接（使用 navigator.connection.effectiveType）或启用了省流模式（使用 navigator.connection.saveData）
预获取视区内的 URL（使用或 XHR）。可根据请求优先级进行控制（若支持 fetch() 可进行切换）。

（引用自 jothy 翻译）

该项目源码实现也并不复杂，接下来我们看 React 项目如何接入 quicklink~

react-quicklink-component 解密

由上分析可知，quicklink 需要预获取视区内的 URLs，其实现方式是通过 document.querySelectorAll 方法遍历相关节点的 a 标签。而 React 项目开发时一般屏蔽 Dom 操作，为此我们需要使用 ref 特性获取真实 Dom 节点，打通此环节后，便可以直接使用 quicklink 的 APIs，笔者实现的 react-quicklink-component 既是如此，同时采用了 render prop 的模式，使用非常简单：

<Quicklink quicklink={options}>
  <Comp1 />
  ...
  <CompN />
</Quicklink>

Quicklink 组件核心代码也并不复杂：

  componentDidMount() {
    const quicklinkEle = this.quicklinkRef.current;
    quicklink({
      ...this.props.quicklink,
      el: quicklinkEle
    });
  }
  render() {
    return <div ref={this.quicklinkRef}>{this.props.children}</div>
  }

什么是 render prop 模式呢？ 其实社区上已经有很多关于这种思想的内容，我的新书中亦有介绍，并围绕 render prop 剖析了更多的 React 组件设计模式，这里不再赘述。

最后，react-quicklink-component PRs welcome！

Happy coding!

《React 状态管理与同构实战》这本书由我和前端知名技术大佬颜海镜合力打磨，凝结了我们在学习、实践 React 框架过程中的积累和心得。**除了 React 框架使用介绍以外，着重剖析了状态管理以及服务端渲染同构应用方面的内容。**同时吸取了社区大量优秀思想，进行归纳比对。

本书受到百度公司副总裁沈抖、百度资深前端工程师董睿，以及知名 JavaScript 语言专家阮一峰、Node.js 布道者狼叔、Flarum 中文社区创始人 justjavac、新浪移动前端技术专家小爝、百度资深前端工程师顾轶灵等前端圈众多专家大咖的联合力荐。

有兴趣的读者可以点击这里，了解详情。也可以扫描下面的二维码购买。再次感谢各位的支持与鼓励！恳请各位批评指正！