Memahami React Hooks: Panduan untuk Pembangunan Reaksi Moden

Apakah Cangkuk dalam Reaksi?

Cakuk ialah fungsi yang membenarkan pembangun "menghubungkaitkan" keadaan React dan ciri kitaran hayat daripada komponen berfungsi. Ia diperkenalkan dalam React 16.8 untuk membenarkan pembangun menggunakan keadaan, konteks dan ciri React lain dalam komponen berfungsi tanpa perlu menukarnya kepada komponen kelas. Sebelum cangkuk, komponen kelas adalah satu-satunya cara untuk mengendalikan keadaan, kaedah kitaran hayat dan ciri lain dalam React.

Cangkuk menawarkan cara yang lebih ringkas, boleh dibaca dan boleh diguna semula untuk mengurus logik keadaan dan kitaran hayat dalam komponen berfungsi. Dengan memanfaatkan cangkuk, pembangun React boleh menulis komponen yang lebih ringkas, lebih modular dan lebih mudah untuk diuji.

---

1. Jenis Cangkuk Utama

1.1. useState Hook

Kail useState ialah cangkuk paling asas, dan ia membolehkan anda menambah keadaan pada komponen berfungsi anda. Ia mengembalikan tatasusunan yang mengandungi nilai keadaan semasa dan fungsi untuk mengemas kini nilai tersebut.

Contoh:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

• useState mengambil nilai keadaan awal sebagai argumen (dalam kes ini, 0) dan mengembalikan tatasusunan dengan pembolehubah keadaan (kiraan) dan fungsi untuk mengemas kininya (setCount).

1.2. useEffect Hook

Cangkuk useEffect membolehkan anda melakukan kesan sampingan dalam komponen fungsi anda. Kesan sampingan ini boleh termasuk operasi seperti mengambil data, melanggan acara atau mengubah suai DOM secara manual. Ia menggantikan kaedah kitaran hayat komponen kelas seperti componentDidMount, componentDidUpdate dan componentWillUnmount.

Contoh:

import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(timer);
  }, []); // Empty dependency array means this effect runs once, like componentDidMount

  return <p>Timer: {seconds} seconds</p>;
};

• useEffect dijalankan selepas setiap pemaparan secara lalai. Walau bagaimanapun, anda boleh meluluskan hujah kedua — tatasusunan kebergantungan — untuk mengawal apabila kesan berjalan. Jika tatasusunan kebergantungan kosong, kesannya akan berjalan sekali sahaja apabila komponen dipasang.

1.3. gunakanContext Hook

Cangkuk useContext membolehkan anda mengakses nilai konteks untuk objek Konteks yang diberikan. Ini berguna untuk menghantar data melalui pepohon komponen tanpa perlu menghantar prop secara manual pada setiap peringkat.

Contoh:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

• useContext digunakan untuk mengakses nilai ThemeContext dalam ThemedComponent tanpa menghantar prop tema secara manual.

1.4. useReducer Hook

Cangkuk useReducer ialah alternatif untuk useState apabila anda perlu mengurus logik keadaan yang lebih kompleks, terutamanya apabila keadaan seterusnya bergantung pada keadaan sebelumnya. Ia berfungsi sama seperti cara pengurang berfungsi dalam Redux.

Contoh:

import React, { useState, useEffect } from 'react';

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(timer);
  }, []); // Empty dependency array means this effect runs once, like componentDidMount

  return <p>Timer: {seconds} seconds</p>;
};

• useReducer mengambil fungsi pengurang dan keadaan awal sebagai argumen, dan ia mengembalikan keadaan semasa dan fungsi penghantaran untuk menghantar tindakan kepada pengurang.

1.5. gunakanCallback Hook

Cangkuk useCallback mengembalikan versi memoized fungsi yang hanya berubah jika salah satu kebergantungan telah berubah. Ini boleh membantu mengoptimumkan prestasi dengan menghalang penciptaan semula fungsi yang tidak perlu, terutamanya apabila menghantarnya sebagai prop kepada komponen kanak-kanak.

Contoh:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);
  return <div>The current theme is {theme}</div>;
};

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
};

• useCallback menghalang fungsi handleClick daripada dicipta semula pada setiap pemaparan, mengoptimumkan prestasi, terutamanya dalam aplikasi besar.

1.6. gunakanMemo Hook

Cakuk useMemo adalah serupa dengan useCallback, tetapi ia mengembalikan nilai yang dihafal dan bukannya fungsi yang dihafal. Ia membantu mengoptimumkan prestasi dengan mengira semula nilai hanya apabila perlu.

Contoh:

import React, { useReducer } from 'react';

// Reducer function
const counterReducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

• useMemo membantu mengelakkan pengiraan mahal dengan menghafal hasil pengiraan sehingga kebergantungan yang berkaitan (dalam kes ini, kiraan) berubah.

---

2. Kelebihan Mata Kail

1. Kod Lebih Ringkas dan Ringkas

Cakuk membolehkan anda menggunakan keadaan dan ciri lain dalam komponen berfungsi tanpa menulis komponen berasaskan kelas, menghasilkan kod plat dandang yang kurang dan komponen yang lebih mudah dibaca.

2. Kebolehgunaan Semula yang Lebih Baik

Dengan cangkuk, anda boleh mengekstrak logik komponen ke dalam cangkuk tersuai, menjadikannya lebih mudah untuk berkongsi logik merentas komponen yang berbeza tanpa menduplikasi kod.

3. Tiada Lagi Kata Kunci "ini"

Memandangkan cangkuk digunakan dalam komponen berfungsi, tidak perlu risau tentang kata kunci ini, yang merupakan punca kekeliruan biasa dalam komponen kelas.

4. Organisasi Kod yang Diperbaik

Cangkuk membolehkan anda mengekalkan logik yang berkaitan bersama-sama. Contohnya, anda boleh menggunakan useEffect untuk kesan sampingan dan useState untuk mengurus keadaan, semuanya dalam komponen yang sama, menjadikannya lebih mudah untuk membuat alasan.

---

3. Kesimpulan

Cangkuk ialah ciri berkuasa React yang membenarkan pembangun menggunakan keadaan, kaedah kitaran hayat dan ciri React yang lain dalam komponen berfungsi. Dengan menggunakan cangkuk seperti useState, useEffect, useContext dan useReducer, pembangun React boleh menulis kod yang lebih bersih, lebih boleh diselenggara dan modular. Cangkuk menjadikan komponen berfungsi lebih berkuasa dan membolehkan penggunaan ciri moden seperti keadaan dan kesan sampingan tanpa kerumitan komponen kelas.

---

Atas ialah kandungan terperinci Memahami React Hooks: Panduan untuk Pembangunan Reaksi Moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!