首页 > web前端 > js教程 > 正文

`useInsertionEffect` React hook 的用例

WBOY
发布: 2024-08-22 19:14:06
原创
541 人浏览过

Use cases for `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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!