`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中文网其他相关文章！