Rumah  >  Artikel  >  hujung hadapan web  >  Gunakan kes untuk cangkuk React `useInsertionEffect`

Gunakan kes untuk cangkuk React `useInsertionEffect`

WBOY
WBOYasal
2024-08-22 19:14:06537semak imbas

Use cases for `useInsertionEffect` React hook

Pengenalan

Semua orang biasa dengan useEffect hook, kadangkala useLayoutEffect lebih sesuai.

Tidak ramai yang pernah menggunakan useInsertionEffect, mari kita terokainya.

API untuk cangkuk sangat serupa dengan useEffect, perlu menambah kod ke dalam fungsi persediaan, tatasusunan kebergantungan dan ia boleh mengembalikan fungsi pembersihan.

Dokumen reaksi memberikan penerangan ini.

useInsertionEffect adalah untuk pengarang perpustakaan CSS-dalam-JS.

Ia boleh berguna untuk tujuan lain, terutamanya untuk menjalankan beberapa kod sekali pada lekap komponen, mis. tambahkan pendengar acara pada tetingkap.

Kes guna

Penyerlah kod Shiki

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

Pendengar acara untuk tetingkap

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

    window.addEventListener(popstateEv, popCb);

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

Beberapa langganan tersuai

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

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

Kebaikan dan keburukan

  • Faedah utama cangkuk ini ialah menjalankan kod sebelum komponen diberikan dan sebelum cangkuk lain.
  • Anda tidak sepatutnya menggunakan useState.setState dari dalam cangkuk ini, tetapi ia berfungsi, mungkin ia akan berubah pada masa hadapan.
  • Rujuk tidak dilampirkan semasa larian cangkuk masa.

Atas ialah kandungan terperinci Gunakan kes untuk cangkuk React `useInsertionEffect`. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Memahami Array.reduce()Artikel seterusnya:Memahami Array.reduce()