摘要：最后，狀態(tài)管理與同構(gòu)實(shí)戰(zhàn)這本書由我和前端知名技術(shù)大佬顏海鏡合力打磨，凝結(jié)了我們?cè)趯W(xué)習(xí)實(shí)踐框架過(guò)程中的積累和心得。

對(duì)于前端資訊比較敏感的同學(xué)，可能這兩天已經(jīng)聽說(shuō)了 GoogleChromeLabs/quicklink這個(gè)項(xiàng)目：它由 Google 公司著名開發(fā)者 Addy Osmani 發(fā)起，實(shí)現(xiàn)了：在空閑時(shí)間預(yù)獲取頁(yè)面可視區(qū)域內(nèi)的鏈接，加快后續(xù)加載速度。如果你沒(méi)有聽說(shuō)過(guò) Addy Osmani 大神的名號(hào)，但對(duì)于他的多篇演講或文章：

The Cost Of JavaScript In 2018，

以及著作書籍：

Learning JavaScript Design Patterns

等，也許你并不陌生。大神出品，必屬精品，Google 團(tuán)隊(duì) quicklink 項(xiàng)目一經(jīng)推出便吸睛無(wú)數(shù)。

該庫(kù)面向原生 JavaScript，利用瀏覽器眾多特性，設(shè)計(jì)巧妙而實(shí)用。可是，如果我們的項(xiàng)目基于 React/React Native，如何利用 quicklink，實(shí)現(xiàn)頁(yè)面秒開呢？相信不止一個(gè)開發(fā)者會(huì)有此疑問(wèn)，該倉(cāng)庫(kù) issue 中便有一位巴基斯坦老兄問(wèn)到：How to use with react-native?：

為此，我實(shí)現(xiàn)了一個(gè)?react-quicklink-component，專門解決此問(wèn)題：讓基于 React/React Native 的項(xiàng)目無(wú)縫對(duì)接到 quicklink。

開始之前，請(qǐng)?jiān)试S我插播一條廣告～

從去年起，我和知名技術(shù)大佬 顏海鏡 開始了合著之旅，今年我們共同打磨的書籍《React 狀態(tài)管理與同構(gòu)實(shí)戰(zhàn)》終于正式出版了！這本書以 React 技術(shù)棧為核心，在介紹 React 用法的基礎(chǔ)上，從源碼層面分析了 Redux 思想，同時(shí)著重介紹了服務(wù)端渲染和同構(gòu)應(yīng)用的架構(gòu)模式。書中包含許多項(xiàng)目實(shí)例，不僅為用戶打開了 React 技術(shù)棧的大門，更能提升讀者對(duì)前沿領(lǐng)域的整體認(rèn)知。

如果各位對(duì)圖書內(nèi)容或接下來(lái)的內(nèi)容感興趣，還望多多支持！文末有詳情，不要走開！

這個(gè)?WebPageTest demo?演示了 quicklink 的預(yù)獲取功能，它將頁(yè)面加載性能提高了 4 秒！?Youtube 視頻 見此處。

實(shí)現(xiàn)原理很簡(jiǎn)單，quicklink 主要通過(guò)以下方式加快后續(xù)頁(yè)面的加載速度：

檢測(cè)視區(qū)中的鏈接（使用 Intersection Observer https://developer.mozilla.org...）

等待瀏覽器空閑（使用 requestIdleCallback https://developer.mozilla.org...）

檢查用戶是否處于慢速連接（使用 navigator.connection.effectiveType）或啟用了省流模式（使用 navigator.connection.saveData）

預(yù)獲取視區(qū)內(nèi)的 URL（使用或 XHR）。 可根據(jù)請(qǐng)求優(yōu)先級(jí)進(jìn)行控制（若支持 fetch() 可進(jìn)行切換）。

（引用自 jothy 翻譯）

該項(xiàng)目源碼實(shí)現(xiàn)也并不復(fù)雜，接下來(lái)我們看 React 項(xiàng)目如何接入 quicklink~

由上分析可知，quicklink 需要預(yù)獲取視區(qū)內(nèi)的 URLs，其實(shí)現(xiàn)方式是通過(guò) document.querySelectorAll 方法遍歷相關(guān)節(jié)點(diǎn)的 a 標(biāo)簽。而 React 項(xiàng)目開發(fā)時(shí)一般屏蔽 Dom 操作，為此我們需要使用 ref 特性獲取真實(shí) Dom 節(jié)點(diǎn)，打通此環(huán)節(jié)后，便可以直接使用 quicklink 的 APIs，筆者實(shí)現(xiàn)的 react-quicklink-component 既是如此，同時(shí)采用了 render prop 的模式，使用非常簡(jiǎn)單：

  
  ...
  

Quicklink 組件核心代碼也并不復(fù)雜：

  componentDidMount() {
    const quicklinkEle = this.quicklinkRef.current;
    quicklink({
      ...this.props.quicklink,
      el: quicklinkEle
    });
  }
  render() {
    return 
{this.props.children}
  }

什么是 render prop 模式呢？其實(shí)社區(qū)上已經(jīng)有很多關(guān)于這種思想的內(nèi)容，我的新書中亦有介紹，并圍繞 render prop 剖析了更多的 React 組件設(shè)計(jì)模式，這里不再贅述。

最后，react-quicklink-component PRs welcome！

Happy coding!

《React 狀態(tài)管理與同構(gòu)實(shí)戰(zhàn)》這本書由我和前端知名技術(shù)大佬顏海鏡合力打磨，凝結(jié)了我們?cè)趯W(xué)習(xí)、實(shí)踐 React 框架過(guò)程中的積累和心得。除了 React 框架使用介紹以外，著重剖析了狀態(tài)管理以及服務(wù)端渲染同構(gòu)應(yīng)用方面的內(nèi)容。同時(shí)吸取了社區(qū)大量?jī)?yōu)秀思想，進(jìn)行歸納比對(duì)。

本書受到百度公司副總裁沈抖、百度資深前端工程師董睿，以及知名 JavaScript 語(yǔ)言專家阮一峰、Node.js 布道者狼叔、Flarum 中文社區(qū)創(chuàng)始人 justjavac、新浪移動(dòng)前端技術(shù)專家小爝、百度資深前端工程師顧軼靈等前端圈眾多專家大咖的聯(lián)合力薦。

有興趣的讀者可以點(diǎn)擊這里，了解詳情。也可以掃描下面的二維碼購(gòu)買。再次感謝各位的支持與鼓勵(lì)！懇請(qǐng)各位批評(píng)指正！