摘要：最后，状态管理与同构实战这本书由我和前端知名技术大佬颜海镜合力打磨，凝结了我们在学习实践框架过程中的积累和心得。
对于前端资讯比较敏感的同学，可能这两天已经听说了 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（使用或 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 组件核心代码也并不复杂：
componentDidMount() {
const quicklinkEle = this.quicklinkRef.current;
quicklink({
...this.props.quicklink,
el: quicklinkEle
});
}
render() {
return {this.props.children}
}
什么是 render prop 模式呢？其实社区上已经有很多关于这种思想的内容，我的新书中亦有介绍，并围绕 render prop 剖析了更多的 React 组件设计模式，这里不再赘述。
最后，react-quicklink-component PRs welcome！
Happy coding!
《React 状态管理与同构实战》这本书由我和前端知名技术大佬颜海镜合力打磨，凝结了我们在学习、实践 React 框架过程中的积累和心得。除了 React 框架使用介绍以外，着重剖析了状态管理以及服务端渲染同构应用方面的内容。同时吸取了社区大量优秀思想，进行归纳比对。
本书受到百度公司副总裁沈抖、百度资深前端工程师董睿，以及知名 JavaScript 语言专家阮一峰、Node.js 布道者狼叔、Flarum 中文社区创始人 justjavac、新浪移动前端技术专家小爝、百度资深前端工程师顾轶灵等前端圈众多专家大咖的联合力荐。
有兴趣的读者可以点击这里，了解详情。也可以扫描下面的二维码购买。再次感谢各位的支持与鼓励！恳请各位批评指正！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100129.html
摘要：最后，状态管理与同构实战这本书由我和前端知名技术大佬颜海镜合力打磨，凝结了我们在学习实践框架过程中的积累和心得。 对于前端资讯比较敏感的同学，可能这两天已经听说了 GoogleChromeLabs/quicklink这个项目：它由 Google 公司著名开发者 Addy Osmani 发起，实现了：在空闲时间预获取页面可视区域内的链接，加快后续加载速度。如果你没有听说过 Addy Os...
摘要：目录结构一个自己的音乐播放器前端掘金前言在最近的一个外包项目中包联盟端中使用到了，遇到了好多坑。有问题或建议发我邮箱前端框架前端掘金是一个基于的前端框架。 手摸手，带你用vue撸后台 系列一 - 掘金项目地址 前言 说好的教程终于来了，第一篇文章主要来说一说在开始写业务代码前的一些准备工作吧，但这里不会教你webpack的基础配置，热更新怎么做，webpack速度优化等等，有需求的请自...
摘要：也能帮你写代码了微软和团队一起推出扩展，预览版可以在插件市场直接查找安装。微软宣布将采用内核这对于诸多的前端开发者而言，无疑是本年底最大的福音具体的计划可以参考官网的博客，在不久的将来，基于的浏览器将要正式和我们见面啦。 订阅 / 投稿：https://github.com/txd-team/monthly本期小编： Hkmu (扶容) / x-cold (尹挚) 新闻快报 npm ...
摘要：也能帮你写代码了微软和团队一起推出扩展，预览版可以在插件市场直接查找安装。微软宣布将采用内核这对于诸多的前端开发者而言，无疑是本年底最大的福音具体的计划可以参考官网的博客，在不久的将来，基于的浏览器将要正式和我们见面啦。 订阅 / 投稿：https://github.com/txd-team/monthly本期小编： Hkmu (扶容) / x-cold (尹挚) 新闻快报 npm ...
摘要：也能帮你写代码了微软和团队一起推出扩展，预览版可以在插件市场直接查找安装。微软宣布将采用内核这对于诸多的前端开发者而言，无疑是本年底最大的福音具体的计划可以参考官网的博客，在不久的将来，基于的浏览器将要正式和我们见面啦。 订阅 / 投稿：https://github.com/txd-team/monthly本期小编： Hkmu (扶容) / x-cold (尹挚) 新闻快报 npm ...
阅读 2448·2021-11-25 09:43
阅读 2263·2021-09-22 15:29
阅读 730·2021-09-22 15:17
阅读 3420·2021-09-03 10:36
阅读 2014·2019-08-30 13:54
阅读 1617·2019-08-30 11:23
阅读 1036·2019-08-29 16:58
阅读 1174·2019-08-29 16:14
