Bagaimana untuk Mengoptimumkan useEffect Hook untuk Mencetuskan Fungsi Hanya pada Render Awal?

Penggunaan Efek Dioptimumkan Cangkuk: Memanggil Fungsi Permulaan Sekali Sahaja

Cangkuk useEffect React membenarkan untuk menjalankan fungsi tersuai sebagai tindak balas kepada perubahan dalam prop atau keadaan komponen. Walau bagaimanapun, dalam senario tertentu, ia dikehendaki memanggil fungsi pada pemaparan awal sahaja, mensimulasikan gelagat kaedah kitaran hayat componentDidMount warisan.

Pertimbangkan komponen berasaskan kelas berikut:

<code class="javascript">class MyComponent extends React.PureComponent {
    componentDidMount() {
        loadDataOnlyOnce();
    }
    render() { ... }
}</code>

Dalam komponen berasaskan fungsi menggunakan cangkuk, ini boleh diterjemahkan seperti berikut:

<code class="javascript">function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // This will fire on every change
    }, [...???]);
    return (...);
}</code>

Untuk memastikan fungsi dipanggil sekali sahaja, tatasusunan kosong harus disediakan sebagai argumen kedua untuk digunakanEffect:

<code class="javascript">function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

  return <div> {/* ... */} </div>;
}</code>

Dengan menyediakan tatasusunan kosong, useEffect akan menyala hanya selepas fasa pemaparan awal, membolehkan pemulaan komponen yang cekap tanpa penyampaian semula yang tidak perlu.

Atas ialah kandungan terperinci Bagaimana untuk Mengoptimumkan useEffect Hook untuk Mencetuskan Fungsi Hanya pada Render Awal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!