结合Googlequicklink，react项目实现页面秒开

对前端信息比较敏感的同学这两天可能听说过GoogleChromeLabs/quicklink项目：它是由AddyOsmani发起的，一个Google著名开发者，并实现：在空闲时间预取页面可见区域的链接，以加快后续加载。如果你没听说过AddyOsmani的名字，但你可能对他的很多演讲或文章很熟悉：TheCostOfJavaScriptIn2018，以及书籍：LearningJavaScriptDesignPatterns等。大神出品，一定是一本精品店。Google团队的quicklink项目一经推出就吸引了无数关注。该库面向原生JavaScript，利用了浏览器的许多特性，设计巧妙且实用。但是，如果我们的项目是基于React/ReactNative，如何使用quicklink秒开页面呢？相信不止一个开发者会有这样的疑问。在这个仓库issue中，一个巴基斯坦人问：Howtousewithreact-native?：为此，我实现了一个react-quicklink-component专门解决这个问题：让基于React/ReactNative的项目无缝连接到quicklink.开始之前，请允许我打个广告~从去年开始，我和颜海静这个知名科技大佬就开始了合着之旅。今年，我们共同打磨的一本书《React 状态管理与同构实战》终于正式出版了！本书以React技术栈为核心。在介绍React用法的基础上，从源码层面分析了Redux的思想，同时着重介绍了服务端渲染和同构应用的架构模式。书中包含众多项目实例，不仅为用户打开了React技术栈的大门，也提升了读者对前沿领域的整体认知。如果您对本书内容或后续内容感兴趣，请多多支持！文末有详细介绍，别走开！什么是快速链接？实现原理分析这个WebPageTestdemo演示了quicklink的prefetch功能，提升了4秒的页面加载性能！Youtube视频在这里。实现原理很简单，quicklink主要通过以下方式加快后续页面的加载速度：检测视口中的链接（使用IntersectionObserverhttps://developer.mozilla.org...）等待浏览器空闲（使用requestIdleCallbackhttps://developer.mozilla.org...）检查用户是否处于慢速连接（使用navigator.connection.effectiveType）或启用流保存模式（使用navigator.connection.saveData）视口（使用或XHR）。可以根据请求的优先级来控制（如果支持fetch()可以切换）。（引自jothy的翻译）这个项目的源码实现并不复杂。接下来看看React项目如何访问quicklink~react-quicklink-component解密。从上面的分析我们可以看出，quicklink需要预先获取视口中的url，其实现方式是通过document.querySelectorAll方法遍历相关节点的标签。但是在React项目的开发过程中，Dom操作一般都是阻塞的。为此，我们需要使用ref特性来获取真实的Dom节点。打开这个链接后，我们就可以直接使用quicklink接口了。作者实现的react-quicklink-component是这样的，同时使用renderprop方式，使用起来非常简单：...Quicklink组件的核心代码并不复杂：componentDidMount(){constquicklinkEle=this.quicklinkRef.current;quicklink({...this.props.quicklink,el:quicklinkEle});}render(){return{this.props.children}