Keadaan Hari dan Kaedah Kitaran Hayat - ReactJS

Selamat datang ke Hari 5 cabaran "30 Hari ReactJS"! Hari ini, kita akan meneroka dua konsep asas dalam React: Kaedah Keadaan dan Kitaran Hayat. Memahami perkara ini akan memperkasakan anda untuk mencipta aplikasi yang dinamik dan interaktif.

Apakah Negeri?

Nyatakan dalam React merujuk kepada objek terbina dalam yang menyimpan maklumat yang mungkin berubah sepanjang hayat komponen. Tidak seperti prop, yang dibaca sahaja dan diturunkan daripada komponen induk, keadaan adalah setempat kepada komponen dan boleh diubah suai secara dalaman.

Fikirkan keadaan seperti papan tulis. Anda boleh menulis dan memadam maklumat padanya mengikut keperluan, membenarkan komponen anda menyesuaikan diri dengan perubahan, seperti input pengguna atau pengambilan data.

Contoh: Komponen Kaunter

Mari kita buat komponen pembilang mudah yang meningkatkan kiraannya apabila butang diklik:

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Di sini, useState ialah cangkuk React yang membolehkan anda menambah keadaan pada komponen berfungsi. Pembolehubah kiraan mengekalkan keadaan semasa dan setCount ialah fungsi untuk mengemas kininya.

Apakah Kaedah Kitar Hayat?

Kaedah kitar hayat ialah kaedah khas dalam komponen kelas React yang membolehkan anda menjalankan kod pada titik tertentu dalam kitaran hayat komponen. Kitaran hayat ini termasuk pemasangan (menambah pada DOM), mengemas kini (memaparkan semula) dan menyahlekap (mengalih keluar daripada DOM).

Walaupun komponen kelas menjadi kurang biasa dengan pengenalan cangkuk React, memahami kaedah kitaran hayat masih penting, terutamanya apabila bekerja dengan pangkalan kod yang lebih lama.

Contoh: componentDidMount

Kaedah kitar hayat yang biasa ialah componentDidMount, yang berjalan selepas komponen pertama kali dipaparkan. Ia sering digunakan untuk memulakan data, seperti mengambil data daripada API:

class DataFetcher extends React.Component {
  state = { data: null };

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <div>
        {this.state.data ? (
          <p>Data: {this.state.data}</p>
        ) : (
          <p>Loading...</p>
        )}
      </div>
    );
  }
}

Dalam contoh ini, componentDidMount mengambil data sebaik sahaja komponen ditambahkan pada DOM dan keadaan dikemas kini dengan data yang diambil.

Contoh Kehidupan Sebenar: Pesanan Restoran
Bayangkan membuat pesanan di restoran (component mounting). Dapur mula menyediakan makanan anda selepas anda membuat pesanan (componentDidMount). Semasa makanan sedang disediakan (kemas kini), anda mungkin mendapat kemas kini status. Akhirnya, makanan dihidangkan dan anda menghabiskan hidangan anda (menyahlekap komponen).

Keadaan dan Kitaran Hayat dengan Vite

Memandangkan kami menggunakan Vite untuk persekitaran pembangunan kami, menyediakan kaedah keadaan dan kitaran hayat adalah lancar. Pelayan pembangunan pantas Vite memastikan perubahan keadaan anda dan kaedah kitaran hayat dicerminkan hampir serta-merta semasa pembangunan.

Begini cara anda boleh menstruktur projek anda untuk memasukkan kaedah keadaan dan kitaran hayat:

1. Initialize State: Gunakan useState dalam komponen berfungsi anda untuk mengurus data dinamik.
2. Komponen Kelas untuk Kitar Hayat: Jika anda menggunakan komponen kelas, laksanakan kaedah kitaran hayat seperti componentDidMount dan componentWillUnmount untuk mengurus kesan sampingan.

Membungkus

Kaedah keadaan dan kitaran hayat adalah penting untuk mencipta aplikasi React yang dinamik dan responsif. State membolehkan komponen anda menjadi interaktif, manakala kaedah kitaran hayat memberi anda kawalan ke atas cara dan masa komponen anda berinteraksi dengan DOM.

Esok, kami akan meneroka Peristiwa Pengendalian dalam React, yang akan meningkatkan lagi interaktiviti aplikasi anda.

Atas ialah kandungan terperinci Keadaan Hari dan Kaedah Kitaran Hayat - ReactJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!