資訊專欄INFORMATION COLUMN
摘要：最后，狀態管理與同構實戰這本書由我和前端知名技術大佬顏海鏡合力打磨，凝結了我們在學習實踐框架過程中的積累和心得。
對于前端資訊比較敏感的同學，可能這兩天已經聽說了 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、新浪移動前端技術專家小爝、百度資深前端工程師顧軼靈等前端圈眾多專家大咖的聯合力薦。
有興趣的讀者可以點擊這里，了解詳情。也可以掃描下面的二維碼購買。再次感謝各位的支持與鼓勵！懇請各位批評指正！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100129.html
摘要：也能幫你寫代碼了微軟和團隊一起推出擴展，預覽版可以在插件市場直接查找安裝。微軟宣布將采用內核這對于諸多的前端開發者而言，無疑是本年底最大的福音具體的計劃可以參考官網的博客，在不久的將來，基于的瀏覽器將要正式和我們見面啦。 訂閱 / 投稿：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 ...
閱讀 2662·2021-11-25 09:43
閱讀 2472·2021-09-22 15:29
閱讀 984·2021-09-22 15:17
閱讀 3628·2021-09-03 10:36
閱讀 2223·2019-08-30 13:54
閱讀 1740·2019-08-30 11:23
閱讀 1163·2019-08-29 16:58
閱讀 1290·2019-08-29 16:14
