Gunakan kes untuk cangkuk React `useInsertionEffect`

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!