Memahami React Hooks: Panduan Pemula

"Memahami React Hooks: Panduan Pemula"

React Hooks ialah salah satu ciri paling berkuasa yang diperkenalkan dalam React. Mereka memudahkan pengurusan keadaan dan kesan sampingan dalam komponen berfungsi, menjadikan kod anda lebih bersih dan lebih mudah dibaca. Dalam siaran ini, kami akan membincangkan tiga cangkuk yang biasa digunakan: useState, useEffect dan useContext.

---

1. useState – Menguruskan Keadaan dalam Komponen Fungsian

Kait useState membolehkan anda menambah keadaan pada komponen berfungsi tanpa menukarnya kepada komponen kelas.

Contoh:

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

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Cara ia berfungsi:

• useState mengembalikan tatasusunan dengan dua nilai: keadaan semasa dan fungsi untuk mengemas kininya.
• Anda boleh menggunakannya untuk mengurus sebarang jenis data—nombor, rentetan, objek atau tatasusunan.

---

2. useEffect – Menguruskan Kesan Sampingan

Kait useEffect sesuai untuk mengendalikan kesan sampingan seperti panggilan API, langganan atau manipulasi DOM.

Contoh:

const DataFetcher = () => {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty array ensures this runs only once on mount

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

Isi Penting:

• Argumen kedua (tatasusunan kebergantungan) menentukan apabila kesan berjalan.
• Gunakan tatasusunan kosong ([]) untuk menjalankan kesan sekali sahaja selepas komponen dipasang.

---

3. useContext – Menguruskan Keadaan Global

Cakuk useContext memudahkan mengakses data global tanpa memberikan prop ke bawah pepohon komponen.

Contoh:

const ThemeContext = React.createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = React.useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

const ThemeToggler = () => {
  const { theme, setTheme } = React.useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Toggle Theme: {theme}
    </button>
  );
};

// Usage in App
const App = () => (
  <ThemeProvider>
    <ThemeToggler />
  </ThemeProvider>
);

Mengapa Gunakan useContext?

• Ia mengelakkan "penggerudian prop," di mana anda melepasi prop melalui pelbagai peringkat komponen.
• Ia sesuai untuk mengurus tema global, data pengguna atau tetapan apl.

---

Kesimpulan

React Hooks menjadikan komponen berfungsi lebih berkuasa dan fleksibel. Dengan useState, useEffect dan useContext, anda boleh mengurus keadaan, kesan sampingan dan data global dengan mudah tanpa bergantung pada komponen kelas.

Cangkuk mesti dipelajari untuk mana-mana pembangun React—mulakan percubaan dan temui cara ia memudahkan proses pembangunan anda!

Apakah React Hook kegemaran anda? Beritahu saya dalam ulasan!

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