大家都熟悉useEffect hook,有时候useLayoutEffect更合适。
用过useInsertionEffect的人并不多,我们来探索一下。
hook 的 API 和 useEffect 非常相似,需要在 setup 函数、依赖数组中添加代码,并且可以返回一个清理函数。
React 文档给出了这个描述。
useInsertionEffect 适用于 CSS-in-JS 库作者。
它可用于其他目的,主要是在组件安装时运行一些代码,例如将事件侦听器添加到窗口。
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(); }; }, []);
以上是`useInsertionEffect` React hook 的用例的详细内容。更多信息请关注PHP中文网其他相关文章!