成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

精讀《怎么用 React Hooks 造輪子》

Shihira / 526人閱讀

摘要：可以看到，這樣不僅沒有占用組件自己的，也不需要手寫回調(diào)函數(shù)進(jìn)行處理，這些處理都壓縮成了一行。效果通過拿到周期才執(zhí)行的回調(diào)函數(shù)。實現(xiàn)等價于的回調(diào)僅執(zhí)行一次時，因此直接把回調(diào)函數(shù)拋出來即可。

1 引言

上周的 精讀《React Hooks》 已經(jīng)實現(xiàn)了對 React Hooks 的基本認(rèn)知，也許你也看了 React Hooks 基本實現(xiàn)剖析（就是數(shù)組），但理解實現(xiàn)原理就可以用好了嗎？學(xué)的是知識，而用的是技能，看別人的用法就像刷抖音一樣（哇，飯還可以這樣吃？），你總會有新的收獲。

這篇文章將這些知識實踐起來，看看廣大程序勞動人民是如何發(fā)掘 React Hooks 的潛力的（造什么輪子）。

首先，站在使用角度，要理解 React Hooks 的特點是 “非常方便的 Connect 一切”，所以無論是數(shù)據(jù)流、Network，或者是定時器都可以監(jiān)聽，有一點 RXJS 的意味，也就是你可以利用 React Hooks，將 React 組件打造成：任何事物的變化都是輸入源，當(dāng)這些源變化時會重新觸發(fā) React 組件的 render，你只需要挑選組件綁定哪些數(shù)據(jù)源（use 哪些 Hooks），然后只管寫 render 函數(shù)就行了！

2 精讀

參考了部分 React Hooks 組件后，筆者按照功能進(jìn)行了一些分類。

由于 React Hooks 并不是非常復(fù)雜，所以就不按照技術(shù)實現(xiàn)方式去分類了，畢竟技術(shù)總有一天會熟練，而且按照功能分類才有持久的參考價值。
DOM 副作用修改 / 監(jiān)聽

做一個網(wǎng)頁，總有一些看上去和組件關(guān)系不大的麻煩事，比如修改頁面標(biāo)題（切換頁面記得改成默認(rèn)標(biāo)題）、監(jiān)聽頁面大小變化（組件銷毀記得取消監(jiān)聽）、斷網(wǎng)時提示（一層層裝飾器要堆成小山了）。而 React Hooks 特別擅長做這些事，造這種輪子，大小皆宜。

由于 React Hooks 降低了高階組件使用成本，那么一套生命周期才能完成的 “雜耍” 將變得非常簡單。

下面舉幾個例子：

修改頁面 title

效果：在組件里調(diào)用 useDocumentTitle 函數(shù)即可設(shè)置頁面標(biāo)題，且切換頁面時，頁面標(biāo)題重置為默認(rèn)標(biāo)題 “前端精讀”。

useDocumentTitle("個人中心");

實現(xiàn)：直接用 document.title 賦值，不能再簡單。在銷毀時再次給一個默認(rèn)標(biāo)題即可，這個簡單的函數(shù)可以抽象在項目工具函數(shù)里，每個頁面組件都需要調(diào)用。

function useDocumentTitle(title) {
  useEffect(
    () => {
      document.title = title;
      return () => (document.title = "前端精讀");
    },
    [title]
  );
}

在線 Demo

監(jiān)聽頁面大小變化，網(wǎng)絡(luò)是否斷開

效果：在組件調(diào)用 useWindowSize 時，可以拿到頁面大小，并且在瀏覽器縮放時自動觸發(fā)組件更新。

const windowSize = useWindowSize();
return 
頁面高度：{windowSize.innerWidth}
;

實現(xiàn)：和標(biāo)題思路基本一致，這次從 window.innerHeight 等 API 直接拿到頁面寬高即可，注意此時可以用 window.addEventListener("resize") 監(jiān)聽頁面大小變化，此時調(diào)用 setValue 將會觸發(fā)調(diào)用自身的 UI 組件 rerender，就是這么簡單！

最后注意在銷毀時，removeEventListener 注銷監(jiān)聽。

function getSize() {
  return {
    innerHeight: window.innerHeight,
    innerWidth: window.innerWidth,
    outerHeight: window.outerHeight,
    outerWidth: window.outerWidth
  };
}

function useWindowSize() {
  let [windowSize, setWindowSize] = useState(getSize());

  function handleResize() {
    setWindowSize(getSize());
  }

  useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return windowSize;
}

在線 Demo

動態(tài)注入 css

效果：在頁面注入一段 class，并且當(dāng)組件銷毀時，移除這個 class。

const className = useCss({
  color: "red"
});

return 
Text.
;

實現(xiàn)：可以看到，Hooks 方便的地方是在組件銷毀時移除副作用，所以我們可以安心的利用 Hooks 做一些副作用。注入 css 自然不必說了，而銷毀 css 只要找到注入的那段引用進(jìn)行銷毀即可，具體可以看這個 代碼片段。

DOM 副作用修改 / 監(jiān)聽場景有一些現(xiàn)成的庫了，從名字上就能看出來用法：document-visibility、network-status、online-status、window-scroll-position、window-size、document-title。
組件輔助

Hooks 還可以增強(qiáng)組件能力，比如拿到并監(jiān)聽組件運行時寬高等。

獲取組件寬高

效果：通過調(diào)用 useComponentSize 拿到某個組件 ref 實例的寬高，并且在寬高變化時，rerender 并拿到最新的寬高。

const ref = useRef(null);
let componentSize = useComponentSize(ref);

return (
  <>
    {componentSize.width}