Apa itu cangkuk dalam tindak balas

In react, cangkuk ialah ciri baharu React16.8, yang digunakan untuk menggunakan keadaan dan ciri tindak balas lain tanpa menulis kelas, anda boleh menggunakan komponen fungsi untuk menggunakan beberapa ciri dalam bertindak balas, dan komponen Fungsi juga boleh mempunyai keadaan, dan operasi keadaan biasa antara komponen boleh dilaksanakan melalui cangkuk tersuai.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah cangkuk dalam tindak balas?

Kail tindak balas ialah ciri baharu yang diperkenalkan dalam bertindak balas Maksud: Hook ialah ciri baharu React 16.8. Ia membolehkan anda menggunakan keadaan dan ciri React lain tanpa menulis kelas. Ringkasnya, anda boleh menggunakan komponen fungsi untuk menggunakan beberapa ciri sebagai tindak balas

Masalah yang perlu diselesaikan:

Selesaikan masalah sukar menggunakan semula logik keadaan antara komponen . Apa yang boleh diselesaikan oleh cangkuk ialah menggunakan semula logik keadaan tanpa mengubah struktur komponen sebelumnya Tanpa menggunakan cangkuk, anda perlu menggunakan beberapa penggunaan lanjutan seperti komponen lanjutan, pembekal, pelanggan, dan lain-lain mesra, dan mungkin sukar untuk difahami Untuk komponen yang kompleks, anda boleh membahagikan logiknya Contohnya, apabila anda menggunakan fungsi kitaran hayat, kitaran hayat yang berbeza perlu dijalankan pada masa yang berbeza, jadi Pada kali ini, untuk komponen yang kompleks, terdapat banyak logik dalam beberapa fungsi kitaran hayat, yang sangat mengurangkan kebolehbacaan. Apabila cangkuk digunakan, logik komponen boleh dibahagikan dan logik yang sama boleh disepadukan bersama, yang sangat meningkatkan kebolehbacaan dan memudahkan penyelenggaraan di satu pihak

Tidak perlu memahami komponen kelas Apabila anda mula-mula belajar, anda perlu memahami maksud kata kunci ini dalam komponen semasa, tetapi anda tidak memerlukannya dalam cangkuk. Ia boleh menyelesaikan masalah menjelmakan ciri-ciri tindak balas tanpa menggunakan komponen kelas

Satu perkara yang perlu diperhatikan ialah komponen cangkuk dan kelas tidak boleh digunakan pada masa yang sama Anda mesti memberi perhatian semasa proses penggunaan sebenar, jika tidak ia akan Ralat berlaku.

Penggunaan react-hook

react menyediakan dua fungsi cangkuk, useState dan useEffect, untuk mencipta stack hook dan effect hook

state cangkuk

Menggunakan useState dalam komponen fungsi boleh menggunakan keadaan untuk komponen Parameter input useState ialah keadaan awal, dan parameter output ialah keadaan semasa dan fungsi; yang mengemas kini keadaan;

useState akan mencipta keadaan apabila dilaksanakan buat kali pertama, dan keadaan ini akan digunakan dalam pelaksanaan berikutnya;

Gunakan useEffect untuk memberikan komponen Tambah logik kesan sampingan

function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Pemahaman peribadi saya tentang apa yang dipanggil kesan sampingan ialah interaksi dengan dunia di luar skop tindak balas, seperti operasi DOM, rangkaian; permintaan, dsb. (Sejujurnya, saya tidak memahami sepenuhnya kesan sampingan itu);

useEffect mempunyai dua parameter input Parameter pertama ialah fungsi kesan sampingan, dan parameter kedua ialah tatasusunan untuk menentukan sama ada untuk melaksanakan kesan sampingan;

Kesan sampingan mempunyai proses pelaksanaan dan pilihan Proses pembersihan, fungsi kesan sampingan mentakrifkan proses pelaksanaan dan fungsi nilai pulangannya mentakrifkan proses pembersihan ;

Kesan sampingan yang ditakrifkan dalam fungsi komponen adalah seperti sebahagian daripada hasil pemaparan, dan kesan sampingan akan dilaksanakan selepas setiap pemaparan sebelum pemaparan dan sebelum komponen dimusnahkan kesan sampingan kami untuk membaca setiap prop dan nyatakan;

Jika anda tidak mahu melaksanakan kesan sampingan setiap kali anda membuat, anda boleh memberikan useEffect Lulus pertama tatasusunan dengan dua parameter dalam tatasusunan tidak berubah, tiada kesan sampingan akan dicetuskan;

function useEffect(effect: EffectCallback, deps?: DependencyList): void;
type EffectCallback = () => (void | (() => void | undefined));
type DependencyList = ReadonlyArray<any>;

Custom hook

Custom hook sebenarnya adalah penggunaan dalaman Fungsi biasa useState dan useEffect ditambah, dan nama fungsi bermula dengan penggunaan;

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

Gunakan cangkuk tersuai untuk mengekstrak logik komponen ke dalam fungsi yang boleh digunakan semula; , dan kesan pengoptimuman prestasi

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apa itu cangkuk dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!