結合 Google quicklink，react 專案實現頁面秒開
對於前端資訊比較敏感的同學，可能這兩天已經聽說了 GoogleChromeLabs/quicklink 這個專案：它由 Google 公司著名開發者 Addy Osmani 發起，實現了：在空閒時間預獲取頁面可視區域內的連結，加快後續載入速度。 如果你沒有聽說過 Addy Osmani 大神的名號，但對於他的多篇演講或文章：
以及著作書籍：
等，也許你並不陌生。大神出品，必屬精品，Google 團隊 quicklink 專案一經推出便吸睛無數。
該庫面向原生 JavaScript，利用瀏覽器眾多特性，設計巧妙而實用。可是，如果我們的專案基於 React/React Native，如何利用 quicklink，實現頁面秒開呢？ 相信不止一個開發者會有此疑問，該倉庫 issue 中便有一位巴基斯坦老兄問到：How to use with react-native?
為此，我實現了一個 react-quicklink-component，專門解決此問題：讓基於 React/React Native 的專案無縫對接到 Google quicklink。
開始之前，請允許我插播一條廣告～
從去年起，我和知名技術大佬
如果各位對圖書內容或接下來的內容感興趣，還望多多支援！文末有詳情，不要走開！
quicklink 到底是什麼？實現原理解析
這個 WebPageTest demo 演示了 quicklink 的預獲取功能，它將頁面載入效能提高了 4 秒！
實現原理很簡單，quicklink 主要通過以下方式加快後續頁面的載入速度：
-
檢測視區中的連結（使用 Intersection Observer developer.mozilla.org/en-US/docs/…
-
等待瀏覽器空閒（使用 requestIdleCallback developer.mozilla.org/en-US/docs/…
-
檢查使用者是否處於慢速連線（使用 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、新浪移動前端技術專家小爝、百度資深前端工程師顧軼靈等前端圈眾多專家大咖的聯合力薦。
有興趣的讀者可以點選這裡，瞭解詳情。也可以掃描下面的二維碼購買。再次感謝各位的支援與鼓勵！懇請各位批評指正！