Apakah &#useCallback' dalam React?

useCallback ialah React Hook yang membantu anda mengoptimumkan komponen anda dengan menghafal fungsi panggil balik. Ia memastikan bahawa rujukan fungsi kekal sama merentas pemaparan melainkan kebergantungannya berubah. Ini amat berguna apabila anda menghantar fungsi sebagai prop kepada komponen kanak-kanak, kerana ia menghalang pemaparan semula atau pelaksanaan semula cangkuk useEffect komponen kanak-kanak yang tidak perlu.

---

Mengapa Gunakan useCallback?

1. Halang Re-Render yang Tidak Diperlukan:
   Jika anda menghantar fungsi panggil balik sebagai prop kepada komponen kanak-kanak, fungsi itu akan dicipta semula pada setiap pemaparan. Ini boleh menyebabkan komponen kanak-kanak dipaparkan semula secara tidak perlu.

2. Rujukan Fungsi Stabil:
   Jika komponen kanak-kanak menggunakan useEffect dan bergantung pada prop panggil balik, rujukan fungsi yang tidak stabil akan menyebabkan useEffect dijalankan semula tanpa perlu.

3. Optimumkan Prestasi:
   Membantu mengelakkan pengiraan atau operasi yang mahal disebabkan oleh penciptaan semula fungsi yang sama secara kerap.

---

Sintaks

const memoizedCallback = useCallback(
  () => {
    // Your logic here
  },
  [dependencies] // Array of dependencies
);

• Fungsi Panggilan Balik: Fungsi yang ingin anda hafal.
• Pergantungan: Nilai yang bergantung pada fungsi. Jika ini berubah, fungsi itu akan dicipta semula.

---

Contoh Tanpa menggunakanPanggil Balik

import React, { useState, useEffect } from "react";

const Child = ({ callback }) => {
  useEffect(() => {
    callback(); // Runs whenever the `callback` reference changes
  }, [callback]);

  return <div>Child Component</div>;
};

const Parent = () => {
  const [count, setCount] = useState(0);

  const callback = () => {
    console.log("Callback called");
  };

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child callback={callback} />
    </div>
  );
};

export default Parent;

• Masalah: Walaupun kiraan berubah, useEffect komponen Kanak-kanak berjalan semula kerana fungsi panggil balik dicipta semula setiap kali Ibu Bapa membuat.

---

Membetulkan dengan useCallback

import React, { useState, useEffect, useCallback } from "react";

const Child = ({ callback }) => {
  useEffect(() => {
    callback(); // Runs only when `callback` changes
  }, [callback]);

  return <div>Child Component</div>;
};

const Parent = () => {
  const [count, setCount] = useState(0);

  const callback = useCallback(() => {
    console.log("Callback called");
  }, []); // Dependencies are empty, so the callback is memoized

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child callback={callback} />
    </div>
  );
};

export default Parent;

• Penyelesaian: Kini, rujukan panggil balik kekal stabil, jadi useEffect komponen Child tidak akan dijalankan semula tanpa perlu.

---

Bila Gunakan useCallback?

• Apabila anda menghantar fungsi sebagai prop kepada komponen kanak-kanak.
• Apabila komponen anak menggunakan React.memo() untuk pengoptimuman.
• Apabila komponen kanak-kanak bergantung pada useEffect yang menggunakan fungsi.

---

Penyalahgunaan Biasa

Jangan jangan gunakan useCallback untuk setiap fungsi. Ia hanya berfaedah jika:

1. Fungsi diserahkan sebagai prop kepada kanak-kanak.
2. Fungsi ini adalah mahal dari segi pengiraan untuk dicipta semula.

Atas ialah kandungan terperinci Apakah &#useCallback' dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!