Apa itu kail? Mari kita bahas tentang dua Hooks yang umum digunakan di React

Cara cepat memulai dengan VUE3.0: Sebelum mulai belajar,

mari kita perkenalkan terlebih dahulu apa itu hook.

Hook adalah fitur baru dari React 16.8. Ini khusus digunakan dalam komponen fungsional. Ini dapat menggantikan fitur reaksi lainnya di komponen kelas dan umumnya digunakan dalam pekerjaan sebenarnya.

Mengapa disarankan menggunakan hook untuk pengembangan?

Hooks secara khusus digunakan untuk bekerja sama dengan pengembangan komponen fungsional. Hooks dapat digunakan untuk menggantikan beberapa siklus hidup komponen kelas untuk menghindari kebingungan yang disebabkan oleh sejumlah besar komponen tersebut. hooks nyaman untuk pengembangan dan memudahkan pengembang untuk memahami kodenya.

Di atas adalah ringkasan pribadi singkat. Untuk alasan lebih lanjut, silakan merujuk ke situs web resmi react:

https://react.docschina.org/docs/hooks-intro. html#motivation

useState

Dalam kode:

React.useState(0) setara dengan this di komponen kelas. Menambahkan variabel nilai atribut

ke

state setara dengan this.state di komponen kelas

untuk mengubah nilai variabel, yang bisa setara dengan this.setState di komponen kelas.

import React, (useState) from 'react'
ekspor fungsi default useState_Demo() {
    const [variable, setVariable] = useState(0);//Melalui penugasan destrukturisasi, kita mendapatkan variabel dan setVariable
    perubahan fungsiVariabel(){
        setVariable((variable) => variabel +1) //Parameter yang diteruskan dalam callback setVariable adalah variabel
    }
    menyajikan (
        <div> 
            <button onclick = {change}>Klik saya untuk membuat variabel+1</button>
        </div>
    )
}

useEffect

:

Seperti terlihat pada kode berikut, penggunaan useEffect menggantikan penggunaan komponenDidMoun, komponenDidUpdate, dan komponenWillUnmount pada komponen kelas.

import React, (useState, useEffect) from 'react'
ekspor fungsi default useState_Demo() {
   const [variable, setVariable] = useState(0);//Melalui penugasan destrukturisasi, kita mendapatkan variabel dan setVariable
    
    gunakanEffect(() => {
        //Pengembalian ini dipanggil ketika data yang dipantau oleh komponen berubah atau ketika dihapus instalasinya, pemanggilannya bisa sama dengan componentWillUnmount hook return () => {
            console.log('Komponen telah di-uninstall')
        }
    }, [variabel])//Parameter kedua diteruskan ke [variabel], yang berarti bahwa perubahan pembaruan variabel terdeteksi. Setelah variabel berubah, callback useEffect akan dijalankan lagi //Parameter kedua diteruskan [] , yang berarti tidak ada seorang pun Deteksi hanya mengeksekusi panggilan balik useEffect satu kali, yang setara dengan kait komponenDidMount //Parameter kedua tidak meneruskan parameter. Selama komponen mengalami perubahan status, panggilan balik useEffect akan dijalankan, yang mana setara dengan fungsi kait komponenDidUpdate changeVariable(){
        setVariable((variable) => variabel +1) //Parameter yang diteruskan dalam callback setVariable adalah variabel
    }
    menyajikan (
        <div> 
            <button onclick = {change}>Klik saya untuk membuat variabel+1</button>
        </div>
    )
}

Hal-hal yang perlu diperhatikan saat menggunakan hooks

: 1. Hanya gunakan Hooks di lapisan terluar fungsi komponen. Jangan panggil Hooks di loop, kondisi, atau fungsi bersarang

.
ekspor fungsi default useState_Demo() {
   //Ini adalah useEffect(() => {}) yang benar
    
   //Kesalahan 1, menggunakan penilaian bersyarat if(true) {
        useEffect(() => {})
   }
   //Kesalahan 2, menggunakan perulangan while(true) {
        useEffect(() => {})
   }
  //Kesalahan 3, menggunakan useEffect(() => { bersarang
      useEffect(() => {})
  })
}

import React, (useState, useEffect) from 'react'

tidak dapat digunakan di luar fungsi komponen.

//Kesalahan 1, useState digunakan di luar fungsi komponen
const [variabel, setVariable] = useState(0);
//Kesalahan 2, useEffect digunakan di luar fungsi komponen
useEffect(() => {})
ekspor fungsi default useState_Demo() {
   //Benar menggunakannya dalam fungsi komponen const [variable, setVariable] = useState(0);
}

3. Untuk menghindari kesalahan di atas, Anda dapat menginstal plug-in eslint-plugin-react-hooks ESLint untuk memeriksa kesalahan dalam kode.

Kait khusus

Sebuah kait adalah sebuah fungsi komponen, yang sebenarnya digunakan kembali. Fungsinya dienkapsulasi, dan hook khusus juga memanggil hook yang disertakan dengan

reaksi
fungsi useHook(initState) {
  const [variabel, setVariable] = useState(initState)
  variabel kembali;
}
//Gunakan pengait khusus
ekspor fungsi default useState_Demo() {
    const variabelState = useHook(0)
}

Anda mungkin bertanya-tanya, apakah penggunaan Hook yang sama di beberapa komponen akan berbagi status?

Jawabannya adalah: tidak. Karena setiap pemanggilan hook yang datang dengan react bersifat independen dan tidak saling mempengaruhi, maka custom hook bersifat independen dan tidak mempengaruhi satu sama lain jika dipanggil berkali-kali.