`useInsertionEffect` React hook 的用例

簡介

大家都熟悉useEffect hook，有時候useLayoutEffect比較適合。

用過useInsertionEffect的人並不多，我們來探索一下。

hook 的 API 和 useEffect 非常相似，需要在 setup 函數、依賴陣列中加入程式碼，並且可以傳回一個清理函數。

React 文件給了這個描述。

useInsertionEffect 適用於 CSS-in-JS 函式庫作者。

它可用於其他目的，主要是在元件安裝時執行一些程式碼，例如將事件偵聽器新增至視窗。

使用案例

Shiki 代碼螢光筆

  React.useInsertionEffect(() => {
    initShiki().then((highlight) => {
      setHtml(highlight(content));
    });
  }, [content]);

視窗的事件監聽器

  useInsertionEffect(() => {
    const popCb = () => {
      const newVal = parse(filterUnknownParamsClient(defaultState));
      state.current = newVal
    };

    window.addEventListener(popstateEv, popCb);

    return () => {
      window.removeEventListener(popstateEv, popCb);
    };
  }, []);

一些自訂訂閱

  useInsertionEffect(() => {
    const cb = () => {
      _setState(stateMap.get(stateShape.current) || stateShape.current);
    };
    const unsub = subscribers.add(stateShape.current, cb);

    return () => {
      unsub();
    };
  }, []);

優點和缺點

• 此鉤子的主要好處是在渲染元件之前以及其他鉤子之前執行程式碼。
• 你不應該在這個鉤子內部使用 useState.setState，但它是有效的，也許將來會改變。
• 鉤子運作時未附加參考。

以上是`useInsertionEffect` React hook 的用例的詳細內容。更多資訊請關注PHP中文網其他相關文章！