Gunakan kes untuk cangkuk React `useInsertionEffect`

WBOY
Lepaskan: 2024-08-22 19:14:06
asal
535 orang telah melayarinya

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]);
Salin selepas log masuk

Pendengar acara untuk tetingkap

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

    window.addEventListener(popstateEv, popCb);

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

Beberapa langganan tersuai

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

    return () => {
      unsub();
    };
  }, []);
Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!