Kaedah Kitar Hayat Bahagian React Js dan Cangkuk dalam React

React ialah perpustakaan JavaScript yang membolehkan kami membina antara muka pengguna secara deklaratif. Salah satu konsep utama dalam React ialah cara kami menguruskan kitaran hayat komponen. Dalam artikel ini, kita akan membincangkan dua aspek utama: kaedah kitaran hayat dalam komponen kelas dan Cangkuk.

1. Kaedah Kitar Hayat dalam Komponen Kelas

Kaedah kitar hayat ialah kaedah khas yang dipanggil pada peringkat berbeza kitaran hayat komponen. Berikut ialah beberapa kaedah kitaran hayat yang paling biasa dan tujuannya:

a. Melekap

• constructor(props): Kaedah pertama dipanggil. Biasanya digunakan untuk memulakan kaedah keadaan dan pengikatan.

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

• componentDidMount(): Dipanggil selepas komponen pertama kali dipasang pada DOM. Sesuai untuk pengambilan data atau memulakan langganan.

componentDidMount() {
  this.fetchData();
}

b. Mengemas kini

componentDidUpdate(prevProps, prevState): Dipanggil selepas kemas kini komponen. Berguna untuk bertindak balas terhadap perubahan dalam prop atau keadaan. Pastikan anda menyemak perubahan untuk mengelakkan gelung tak terhingga.

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

c. Menyahlekap

componentWillUnmount(): Dipanggil tepat sebelum komponen dialih keluar daripada DOM. Berguna untuk membersihkan langganan, pemasa atau operasi lain yang memerlukan pembersihan.

componentWillUnmount() {
  this.cleanup();
}

d. Pengendalian Ralat

componentDidCatch(error, info): Digunakan untuk menangkap ralat dalam komponen anak. Berguna untuk pengendalian ralat terpusat.

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

2. Pengenalan kepada React Hooks

React Hooks ialah ciri yang membolehkan kami menggunakan kaedah keadaan dan kitaran hayat tanpa menulis komponen kelas. Berikut ialah beberapa Cangkuk yang paling biasa digunakan:

a. useState()

Digunakan untuk menambah keadaan pada komponen berfungsi. Fungsi ini mengembalikan pasangan: keadaan semasa dan fungsi untuk mengemas kininya.

import React, { useState } from 'react';

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

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

b. useEffect()

useEffect membolehkan kami menjalankan kesan sampingan dalam komponen berfungsi. Ia menggabungkan fungsi componentDidMount, componentDidUpdate dan componentWillUnmount.

• Contoh 1: useEffect dengan Tatasusunan Kosong ([]) Apabila useEffect digunakan dengan tatasusunan kosong sebagai kebergantungan, kesannya hanya berjalan sekali selepas komponen dipasang.

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

• Contoh 2: useEffect Without Dependency Array Apabila useEffect disediakan tanpa tatasusunan kebergantungan, kesannya berjalan setiap kali komponen itu dipaparkan semula.

componentDidMount() {
  this.fetchData();
}

• Contoh 3: useEffect dengan Array of Dependencies Apabila anda menyediakan tatasusunan kebergantungan, kesannya berjalan apabila salah satu nilai dalam tatasusunan berubah.

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

c. useContext()

Kait useContext digunakan untuk mengakses konteks dalam komponen berfungsi. Ini amat berguna untuk berkongsi data global, seperti tema atau status pengesahan pengguna, tanpa penggerudian prop.

Contoh: Tema dengan useContext
Dalam contoh ini, kami akan mencipta konteks tema ringkas yang membolehkan kami menogol antara tema terang dan gelap.

1. Cipta Konteks Tema
Mula-mula, kami mencipta konteks untuk tema.

componentWillUnmount() {
  this.cleanup();
}

2. Gunakan Konteks Tema
Seterusnya, kita boleh mencipta komponen yang menggunakan konteks tema untuk menggunakan gaya dan menyediakan butang untuk menogol tema.

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

3. Balut Aplikasi dengan Pembekal Tema
Akhir sekali, kami membungkus aplikasi kami (atau sebahagian daripadanya) dengan ThemeProvider untuk menyediakan konteks tema kepada anak-anaknya.

import React, { useState } from 'react';

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

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

Penjelasan

• Penciptaan Konteks Tema: Kami mencipta ThemeContext menggunakan createContext dan komponen ThemeProvider yang mengurus keadaan tema semasa dan menyediakan fungsi untuk menogolnya.

• Penggunaan Konteks: Dalam ThemedComponent, kami menggunakan useContext(ThemeContext) untuk mengakses tema semasa dan fungsi togol. Komponen ini memaparkan kandungan yang berbeza berdasarkan tema semasa dan termasuk butang untuk menogolnya.

• Struktur Aplikasi: Keseluruhan aplikasi (atau sebahagian daripadanya) dibalut dalam ThemeProvider, membenarkan mana-mana komponen kanak-kanak mengakses konteks tema.

d. useMemo() dan useCallback()

• useMemo(): Menyimpan hasil pengiraan mahal untuk mengelakkan pengiraan semula pada setiap pemaparan.

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

const FetchDataOnce = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []); // Effect runs only once when the component mounts

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

• useCallback(): Cache berfungsi untuk mengelak daripada menciptanya semula pada setiap pemaparan.

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

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

  useEffect(() => {
    console.log(`Count updated: ${count}`);

    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data/${count}`);
      const result = await response.json();
      console.log(result);
    };

    fetchData();
  }); // Effect runs every time the component renders

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

3. Kelebihan Menggunakan Cangkuk

Cangkuk memberikan fleksibiliti dan keupayaan untuk berkongsi logik antara komponen tanpa perlu menggunakan Komponen Pesanan Tinggi (HOC) atau membuat prop. Beberapa kelebihan menggunakan Hooks termasuk:

• Kesederhanaan dan kejelasan: Kod menjadi lebih bersih dan mudah dibaca.
• Fleksibiliti: Logik boleh dibahagikan kepada fungsi yang lebih kecil yang boleh digunakan semula di mana-mana sahaja.
• Kerumitan yang dikurangkan: Mengelakkan penggunaan kelas dan kaedah kitaran hayat yang rumit.

---

Kaedah kitaran hayat dan Cangkuk adalah dua aspek penting dalam pembangunan React. Memahami cara kedua-dua konsep berfungsi membolehkan kami mencipta komponen yang lebih cekap dan boleh diselenggara. Hooks, khususnya, membuka kemungkinan baharu untuk membangunkan komponen berfungsi, mengubah cara kita berinteraksi dengan keadaan dan kesan sampingan.

Dengan menguasai kaedah kitaran hayat dan Cangkuk, anda akan dapat membina aplikasi React yang lebih mantap dan responsif. Selamat mengekod!

Atas ialah kandungan terperinci Kaedah Kitar Hayat Bahagian React Js dan Cangkuk dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!