共计 2141 个字符，预计需要花费 6 分钟才能阅读完成。
对于前端资讯比较敏感的同学，可能这两天已经听说了 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 的项目无缝对接到 quicklink。
开始之前，请允许我插播一条广告～
从去年起，我和知名技术大佬 颜海镜 开始了合著之旅，今年我们共同打磨的书籍《React 状态管理与同构实战》终于正式出版了！这本书以 React 技术栈为核心，在介绍 React 用法的基础上，从源码层面分析了 Redux 思想，同时着重介绍了服务端渲染和同构应用的架构模式。书中包含许多项目实例，不仅为用户打开了 React 技术栈的大门，更能提升读者对前沿领域的整体认知。
如果各位对图书内容或接下来的内容感兴趣，还望多多支持！文末有详情，不要走开！
quicklink 到底是什么？实现原理解析
这个 WebPageTest demo 演示了 quicklink 的预获取功能，它将页面加载性能提高了 4 秒！Youtube 视频 见此处。
实现原理很简单，quicklink 主要通过以下方式加快后续页面的加载速度：
检测视区中的链接（使用 Intersection Observer https://developer.mozilla.org…）
等待浏览器空闲（使用 requestIdleCallback https://developer.mozilla.org…）
检查用户是否处于慢速连接（使用 navigator.connection.effectiveType）或启用了省流模式（使用 navigator.connection.saveData）
预获取视区内的 URL（使用 <link rel=prefetch> 或 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、新浪移动前端技术专家小爝、百度资深前端工程师顾轶灵等前端圈众多专家大咖的联合力荐。
有兴趣的读者可以点击这里，了解详情。也可以扫描下面的二维码购买。再次感谢各位的支持与鼓励！恳请各位批评指正！
