Cara cepat memulai VUE3.0: Enter
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.
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.
Menggunakan Hooks Ada dua alasan utama menggunakan Hooks:
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.
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.
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.
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:
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.
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.
useRef mengembalikan objek ref, yang tetap ada sepanjang siklus hidup komponen.
Ini memiliki dua kegunaan:
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 (
<>
<input ref={inputEl} type='teks' />
<button onClick={onButtonClick}>Fokuskan masukan</button>
</>
)
} 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 (
<div>
{waktu / 10} detik.
<br />
<button onClick={handleStart}>Mulai</button>
<button onClick={handlePause}>Jeda</button>
</div>
)
} 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.
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 <MyContext.Provider value='1'>
<Wadah />
</Konteks Saya.Penyedia>
)
}
fungsi Wadah() {
kembali <Tes />
}
fungsi Tes() {
// Dapatkan nilai Konteks const theme = useContext(MyContext) // 1
kembalikan <div></div>
} Kode di atas memperoleh Konteks yang ditentukan dalam komponen Aplikasi melalui useContext, sehingga mencapai pembagian data di seluruh komponen hierarki.
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.
Melalui Hooks kustom, logika komponen dapat diekstraksi menjadi fungsi yang dapat digunakan kembali.
Custom Hooks adalah fungsi yang memiliki dua karakteristik yang membedakannya dari fungsi biasa:
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.
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:
Anda dapat mengunjungi situs web resmi react-use untuk mempelajari cara menggunakannya.
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~