Artikel ini akan memberi Anda pemahaman mendalam tentang React Hooks!

Cara cepat memulai VUE3.0: Enter

Kata Pengantar

Kait digunakan untuk menggunakan status dan fitur React lainnya tanpa menulis kelas. Jadi apa sebenarnya Hooks itu, mengapa kita harus menggunakan Hooks, Hooks umum apa yang disediakan oleh React, dan bagaimana cara mengkustomisasi Hooks? Berikut ini akan diungkapkan kepada Anda satu per satu.

Apa itu Hooks?

Hooks diterjemahkan sebagai hooks adalah fungsi di dalam komponen fungsi yang bertanggung jawab untuk menghubungkan ke fungsi eksternal.

React menyediakan beberapa hook umum, dan React juga mendukung hook khusus. Hook ini digunakan untuk memperkenalkan fungsi eksternal ke fungsi.

Saat kita perlu memasukkan fungsi eksternal ke dalam komponen, kita dapat menggunakan hook yang disediakan oleh React atau menyesuaikan hook.

Misalnya, jika Anda memperkenalkan fungsi pengelolaan status dalam sebuah komponen, Anda dapat menggunakan fungsi useState. Penggunaan useState akan diperkenalkan secara detail di bawah.

Mengapa

Menggunakan Hooks Ada dua alasan utama menggunakan Hooks:

• untuk menyederhanakan penggunaan kembali logika;
• untuk membuat komponen kompleks lebih mudah dipahami.

1. Menyederhanakan penggunaan kembali logika.

Sebelum munculnya Hooks, React harus meminjam pola desain yang kompleks seperti komponen tingkat tinggi dan props render untuk mencapai penggunaan kembali logika. Namun, komponen tingkat tinggi akan menghasilkan node komponen yang berlebihan, membuat proses debug menjadi lebih rumit.

Hooks memungkinkan kita untuk menggunakan kembali logika keadaan tanpa mengubah struktur komponen. Penggunaan Hooks kustom akan diperkenalkan secara rinci di bawah.

2. Membuat komponen kompleks lebih mudah dipahami.

Dalam komponen kelas, kode untuk logika bisnis yang sama tersebar di fungsi siklus hidup komponen yang berbeda, dan Hooks dapat menggabungkan kode untuk logika bisnis yang sama, sehingga logika bisnis dapat digabungkan. dipisahkan dengan jelas. , membuat kode lebih mudah dipahami dan dipelihara.

4. Hooks yang umum digunakan

1. useState

useState adalah Hook yang memungkinkan Anda menambahkan status pada komponen fungsi React.

Contoh penggunaannya adalah sebagai berikut:

import React, { useState } from 'react';

contoh fungsi() {
  // Deklarasikan variabel status bernama "count" const [count, setCount] = useState(0);
  // ...

Kode di atas mendeklarasikan jumlah variabel status dengan nilai awal 0, dan memperbarui jumlah saat ini dengan memanggil setCount.

2. useEffect

useEffect memungkinkan Anda melakukan operasi efek samping dalam komponen fungsi.

Efek samping mengacu pada bagian kode yang tidak ada hubungannya dengan hasil eksekusi saat ini. Operasi efek samping yang umum mencakup akuisisi data, pengaturan langganan, dan perubahan DOM secara manual di komponen React.

useEffect dapat menerima dua parameter, kodenya adalah sebagai berikut:

useEffect(callback, dependencies)

Parameter pertama adalah fungsi callback yang akan dieksekusi, dan parameter kedua adalah dependensi array dependensi opsional.

Ketergantungan bersifat opsional. Jika tidak ditentukan, panggilan balik akan dieksekusi setiap kali komponen fungsi dijalankan; jika ditentukan, itu hanya akan dieksekusi ketika nilai dalam ketergantungan berubah.

Contoh penggunaannya adalah sebagai berikut:

function Contoh() {
  const [hitungan, setCount] = useState(0);

  // Mirip dengan ComponentDidMount dan ComponentDidUpdate:
  gunakanEffect(() => {
    // Perbarui judul dokumen menggunakan API browser
    document.title = `Anda mengklik ${count} kali`;

    kembali () => {
        // Dapat digunakan untuk membersihkan, setara dengan komponenWillUnmount komponen kelas
    }

  }, [count]); // Tentukan ketergantungan sebagai jumlah, dan jalankan efek samping ketika jumlah ketergantungan diperbarui // ...

Kode di atas menggunakan useEffect untuk mengimplementasikan fungsi efek samping ketika jumlah ketergantungan diperbarui, dan menghapusnya dengan mengembalikan fungsi panggilan balik Hasil eksekusi terakhir.

Selain itu, useEffect menyediakan empat pengaturan waktu untuk mengeksekusi efek samping:

• dieksekusi setelah setiap render : parameter ketergantungan kedua tidak disediakan. Misalnya, useEffect(() => {});
• hanya dieksekusi setelah render pertama : menyediakan array kosong sebagai dependensi. Misalnya, useEffect(() => {}, []);
• dieksekusi untuk pertama kalinya dan setelah dependensi berubah : menyediakan array dependensi. Misalnya, useEffect(() => {}, [deps]);
• dieksekusi setelah komponen dilepas : mengembalikan fungsi panggilan balik. Misalnya useEffect() => { return () => {} }, []).

3. useCallback

Fungsi panggilan balik yang ditentukan oleh useCallback hanya akan mendeklarasikan ulang fungsi panggilan balik ketika dependensi berubah, sehingga memastikan bahwa komponen tidak akan membuat fungsi panggilan balik duplikat . Komponen yang menerima fungsi panggilan balik ini sebagai atribut tidak perlu sering dirender ulang .

Contoh penggunaannya adalah sebagai berikut:

const memoizedCallback = useCallback(() => {
  melakukan sesuatu (a, b)
}, [a, b])

Kode di atas akan mendeklarasikan ulang fungsi callback hanya ketika dependensi a dan b berubah.

4. useMemo

Fungsi pembuatan yang ditentukan oleh useMemo hanya akan dihitung ulang ketika ketergantungan tertentu berubah, yang membantu dalam penghitungan overhead tinggi yang tidak akan diulang setiap kali dirender, dan komponen yang menerima nilai terhitung ini sebagai properti tidak akan Diperlukan rendering ulang yang sering .

Contoh penggunaannya adalah sebagai berikut:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

Kode di atas hanya akan dihitung ulang ketika dependensi a dan b berubah.

5. useRef

useRef mengembalikan objek ref, yang tetap ada sepanjang siklus hidup komponen.

Ini memiliki dua kegunaan:

• menyimpan referensi ke node DOM ;
• berbagi data di antara beberapa rendering .

Contoh cara menyimpan node DOM adalah sebagai berikut:

function TextInputWithFocusButton() {
  const inputEl = useRef(null)
  const padaButtonClick = () => {
    // `current` menunjuk ke elemen masukan teks inputEl.current.focus() yang telah dipasang di DOM
  }
  kembali (
    <>
      
      Fokuskan masukan
    
  )
}

Kode di atas membuat objek ref melalui useRef, menyimpan referensi node DOM, dan dapat melakukan operasi DOM pada ref.current.

Contoh berbagi data antara beberapa render adalah sebagai berikut:

import React, { useState, useCallback, useRef } from 'react'

ekspor fungsi default Timer() {
  //Tentukan status waktu untuk menyimpan akumulasi waktu timing const [time, setTime] = useState(0)

  // Tentukan timer. Kontainer seperti itu digunakan untuk menyimpan variabel antara rendering lintas komponen const timer = useRef(null)

  // Fungsi pengendali event untuk memulai pengaturan waktu const handleStart = useCallback(() => {
    // Gunakan atribut saat ini untuk menyetel nilai ref timer.current = window.setInterval(() => {
      setTime((waktu) => waktu + 1)
    }, 100)
  }, [])

  //Jeda waktu fungsi penanganan event const handlePause = useCallback(() => {
    // Gunakan clearInterval untuk menghentikan pengaturan waktu window.clearInterval(timer.current)
    pengatur waktu.saat ini = nol
  }, [])

  kembali (
    

      {waktu / 10} detik.
      

      Mulai
      Jeda
    
  )
}

Kode di atas membuat objek ref dengan nama variabel timer melalui useRef. Objek ini dapat dipanggil saat merender seluruh komponen, membuat timer baru saat memulai pengaturan waktu, dan menghapus timer saat pengaturan waktu dijeda.

6. useContext

useContext digunakan untuk menerima objek konteks dan mengembalikan nilai konteks, yang dapat mencapai berbagi data lintas tingkat.

Contohnya adalah sebagai berikut:

//Membuat objek konteks const MyContext = React.createContext(initialValue)
fungsi Aplikasi() {
  kembali (
    // Meneruskan nilai konteks melalui Context.Provider 
      
    
  )
}

fungsi Wadah() {
  kembali 
}

fungsi Tes() {
  // Dapatkan nilai Konteks const theme = useContext(MyContext) // 1
  kembalikan 

}

Kode di atas memperoleh Konteks yang ditentukan dalam komponen Aplikasi melalui useContext, sehingga mencapai pembagian data di seluruh komponen hierarki.

7. useReducer

useReducer digunakan untuk memperkenalkan fungsi Reducer.

Contohnya adalah sebagai berikut:

const [state, pengiriman] = useReducer(reducer, initialState)

Ia menerima fungsi Reducer dan nilai awal status sebagai parameter dan mengembalikan sebuah array. Anggota pertama array adalah nilai status saat ini, dan anggota kedua adalah fungsi pengiriman yang mengirimkan tindakan.

5. Hooks yang Disesuaikan

Melalui Hooks kustom, logika komponen dapat diekstraksi menjadi fungsi yang dapat digunakan kembali.

1. Bagaimana cara membuat Hooks khusus?

Custom Hooks adalah fungsi yang memiliki dua karakteristik yang membedakannya dari fungsi biasa:

• namanya dimulai dengan "use";
• fungsi tersebut memanggil Hooks lain secara internal.

Contohnya adalah sebagai berikut:

import { useState, useCallback } from 'react'

fungsi useCounter() {
  // Tentukan jumlah, keadaan ini digunakan untuk menyimpan nilai saat ini const [hitungan, setCount] = useState(0)
  // Mengimplementasikan operasi penambahan 1 kenaikan const = useCallback(() => setCount(count + 1), [count])
  // Mengimplementasikan operasi pengurangan sebanyak 1 const decrement = useCallback(() => setCount(count - 1), [count])
  //Setel ulang penghitung const reset = useCallback(() => setCount(0), [])

  // Ekspor operasi logika bisnis untuk digunakan pemanggil return { count, increment, decrement, reset }
}

// komponen 1
fungsi Komponen Saya1() {
  const { hitungan, kenaikan, penurunan, reset } = useCounter()
}

// komponen 2
fungsi Komponen Saya2() {
  const { hitungan, kenaikan, penurunan, reset } = useCounter()
}

Kode di atas dengan mudah menggunakan kembali logika bisnis antara komponen MyComponent1 dan komponen MyComponent2 dengan mengkustomisasi Hooks useCounter.

2. Pustaka Hooks Kustom - React-use

React secara resmi menyediakan pustaka React-use, yang merangkum sejumlah besar Hooks kustom yang dapat digunakan secara langsung, membantu kami menyederhanakan logika internal komponen dan meningkatkan keterbacaan dan pemeliharaan kode.

Diantaranya, Hooks kustom kami yang umum digunakan adalah:

useLocation dan
• useSearchParam
• : melacak status posisi bilah navigasi halaman;
• useScroll: melacak posisi gulir elemen HTML;
• useScrolling: melacak apakah elemen HTML sedang bergulir;
• useAsyncRetry: mengurai fungsi async;
• useTitle: Mengatur judul halaman.

Anda dapat mengunjungi situs web resmi react-use untuk mempelajari cara menggunakannya.

6. Ringkasan

Artikel ini memperkenalkan React Hooks dari empat aspek: apa itu Hooks, mengapa menggunakan Hooks, apa saja yang disediakan oleh Hooks React, dan bagaimana menyesuaikan Hooks.

Semoga membantu Anda, terima kasih sudah membaca~