useEffect フックに精通している人なら誰でも、useLayoutEffect の方が適切な場合もあります。
useInsertionEffect を使用したことのある人はそれほど多くありません。詳しく見てみましょう。
フックの API は useEffect に非常に似ており、セットアップ関数、依存関係配列にコードを追加する必要があり、クリーンアップ関数を返すことができます。
React ドキュメントにこの説明が記載されています。
useInsertionEffect は CSS-in-JS ライブラリの作成者向けです。
これは、主にコンポーネントのマウント時にコードを 1 回実行するなど、他の目的にも役立ちます。イベントリスナーをウィンドウに追加します。
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 フックの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。