Mengapakah useEffect fire apabila saya menggunakan fungsi daripada props (fungsi itu tidak berubah)?

Question

Komponen utama ialah memanggil modal/dialog.

[...]
  const closeDialog = () => setIsOpenDialog(false);
  return (
      <MyDialog
        isOpen={isOpenDialog}
        onClose={closeDialog}
      />
  );

Kod MyDialog ialah:

[...]
  useEffect(() => {
    console.log('This removes dialog states (data)!')
  }, [onClose]);

export default function MyDialog({
  isOpen,
  onClose,
}) {
    return (
    <Dialog
      isOpen={isOpen}
      onClose={onClose}
      dialogTitle="Add/Edit"
      onClickCancel={onClose}
    >
    [...]
    </Dialog>
);
}

Apabila saya klik Batal dan panggil onClose 时，我可以看到 useEffect 已触发。请问这是什么原因呢？我的理解是不应该，因为 onClose 函数对象（来自 props) tiada perubahan.

Answer 1

useEffect 挂钩就会运行。在您的情况下，useEffect 依赖于onClose 属性。因此，每次 onClose Sifat dalam React dijalankan apabila sebarang kebergantungan dalam tatasusunan kebergantungan berubah.

Walau bagaimanapun, walaupun onClose 函数未发生更改，由于 JavaScript 处理函数标识的方式，useEffect dalam kod mungkin masih berjalan. Dalam JavaScript, setiap kali anda mentakrifkan fungsi, ia adalah contoh baharu, walaupun ia melakukan perkara yang sama.

Jadi dalam kes anda, setiap kali komponen dipaparkan semula, anda akan closeDialog 定义为渲染函数中的新函数。这意味着，从 React 的角度来看，onClose 每次都是一个新函数，它会触发 useEffect.

Untuk membetulkannya, anda boleh menggunakan fungsi useCallback 挂钩来确保您的 closeDialog untuk mempunyai identiti yang stabil antara pemaparan melainkan kebergantungannya berubah:

const closeDialog = React.useCallback(() => setIsOpenDialog(false), []);

Dalam contoh di atas, identiti fungsi useCallback 返回函数的记忆版本，该版本仅在依赖项之一发生更改时才会更改。在这种情况下，依赖项数组为空 ([])，这意味着 closeDialog akan kekal stabil merentas pemaparan semula.