国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Shihira / 513人閱讀

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

1 引言

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

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

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

2 精讀

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

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

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

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

下面舉幾個例子：

修改頁面 title

效果：在組件里調用 useDocumentTitle 函數即可設置頁面標題，且切換頁面時，頁面標題重置為默認標題 “前端精讀”。

useDocumentTitle("個人中心");

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

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

在線 Demo

監聽頁面大小變化，網絡是否斷開

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

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

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

最后注意在銷毀時，removeEventListener 注銷監聽。

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

動態注入 css

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

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

return 
Text.
;

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

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

Hooks 還可以增強組件能力，比如拿到并監聽組件運行時寬高等。

獲取組件寬高

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

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

return (
  <>
    {componentSize.width}