Panduan Komprehensif untuk Keadaan Bertindak balas: Mengurus Data Dinamik dalam Komponen Anda

Memahami Keadaan Reaksi: Konsep Utama untuk Membina UI Dinamik

Dalam React, state merujuk kepada objek yang menyimpan data dinamik yang mempengaruhi cara komponen membuat dan bertindak. State membolehkan komponen menjadi interaktif dengan menyimpan maklumat yang boleh berubah dari semasa ke semasa. Apabila keadaan berubah, React secara automatik memaparkan semula komponen untuk mencerminkan keadaan baharu.

Panduan ini akan membimbing anda melalui asas keadaan React, cara menggunakannya dengan berkesan dan cara ia membantu mengurus UI dinamik.

---

1. Apakah React State?

State in React ialah objek terbina dalam yang menyimpan data atau maklumat yang boleh berubah sepanjang kitaran hayat komponen. Tidak seperti props, yang dihantar daripada komponen induk kepada anak, keadaan diuruskan dalam komponen itu sendiri dan boleh berubah secara dinamik sebagai tindak balas kepada tindakan pengguna atau acara lain.

Sebagai contoh, keadaan boleh menyimpan input pengguna, data borang atau status semasa butang togol.

---

2. Mengisytiharkan Keadaan dalam Komponen Fungsian dengan useState

Dalam komponen berfungsi, keadaan biasanya diurus menggunakan cangkuk useState. Cangkuk useState membolehkan anda mengisytiharkan pembolehubah keadaan dan menyediakan fungsi untuk mengemas kininya.

Sintaks:

const [state, setState] = useState(initialValue);

• keadaan: Nilai semasa keadaan.
• setState: Fungsi yang digunakan untuk mengemas kini keadaan.
• initialValue: Nilai awal pembolehubah keadaan.

Contoh Penggunaan useState Hook:

import React, { useState } from 'react';

const Counter = () => {
  // Declare state variable "count" with initial value of 0
  const [count, setCount] = useState(0);

  // Increment the count when the button is clicked
  const increment = () => setCount(count + 1);

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

export default Counter;

Penjelasan:

• Kami mengisytiharkan kiraan pembolehubah keadaan dengan nilai awal 0.
• setCount digunakan untuk mengemas kini keadaan apabila butang diklik.
• React akan memaparkan semula komponen secara automatik dengan nilai kiraan baharu.

---

3. Mengisytiharkan Keadaan dalam Komponen Kelas

Dalam komponen kelas, keadaan diisytiharkan di dalam pembina menggunakan this.state, dan kemas kini dibuat menggunakan this.setState().

Contoh Penggunaan Keadaan dalam Komponen Kelas:

const [state, setState] = useState(initialValue);

Penjelasan:

• Dalam komponen kelas, keadaan dimulakan dalam pembina menggunakan this.state.
• Kami menggunakan this.setState() untuk mengemas kini keadaan dan mencetuskan pemaparan semula.

---

4. Mengemas kini Keadaan

State dalam React dikemas kini melalui fungsi setter (setState untuk komponen berfungsi dan ini.setState untuk komponen kelas). Apabila keadaan dikemas kini, React memaparkan semula komponen untuk mencerminkan keadaan baharu.

Perkara Penting Mengenai Kemas Kini Negeri:

• Kemas Kini Asynchronous: Kemas kini keadaan adalah tidak segerak, bermakna React batch beberapa kemas kini keadaan untuk kecekapan. Jika anda perlu mendapatkan keadaan terkini serta-merta selepas mengemas kini, gunakan panggilan balik dengan this.setState atau bentuk fungsi setState dalam komponen berfungsi.

#### Contoh (Komponen Berfungsi):

import React, { useState } from 'react';

const Counter = () => {
  // Declare state variable "count" with initial value of 0
  const [count, setCount] = useState(0);

  // Increment the count when the button is clicked
  const increment = () => setCount(count + 1);

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

export default Counter;

#### Membetulkan dengan Kemas Kini Berfungsi:

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    // Declare state in the constructor
    this.state = { count: 0 };
  }

  // Method to increment the count
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

• Pengumpulan: Kemas kini keadaan kumpulan tindak balas untuk pengoptimuman prestasi. Apabila berbilang panggilan setState dibuat, React menggabungkannya menjadi satu pemaparan semula, meningkatkan prestasi.

---

5. Pembolehubah Keadaan Berbilang

React membolehkan anda menggunakan berbilang pembolehubah keadaan dalam satu komponen, menjadikannya lebih modular dan mudah untuk mengurus keadaan kompleks.

Contoh:

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

  const increment = () => {
    setCount(count + 1);
    console.log(count); // This will log the old value, not the updated one
  };

---

6. Menaikkan Negeri

Dalam React, jika dua atau lebih komponen perlu berkongsi keadaan yang sama, anda "menaikkan keadaan" kepada nenek moyang mereka yang sama. Nenek moyang yang sama kemudiannya boleh meneruskan fungsi kemas kini keadaan dan keadaan kepada komponen anak sebagai prop.

Contoh Meningkatkan Keadaan:

const [state, setState] = useState(initialValue);

---

7. Amalan Terbaik untuk Mengurus Negeri

• Pastikan keadaan sebagai setempat yang mungkin: Hanya simpan data dalam keadaan yang perlu diakses atau diubah oleh React. Elakkan menyimpan perkara seperti rujukan DOM atau nilai terbitan.
• Gunakan useState dengan berhati-hati: Jangan buat terlalu banyak pembolehubah keadaan, kerana ia boleh menjadikan komponen anda lebih kompleks. Cuba gunakan set keadaan minimum yang sesuai dengan keperluan anda.
• Elakkan mutasi langsung: Jangan sekali-kali mengubah keadaan secara langsung. Sentiasa gunakan fungsi penetap yang disediakan (setState atau setCount) untuk mengubah suai keadaan.

---

8. Kesimpulan

State ialah salah satu konsep teras React dan penting untuk mencipta UI yang interaktif dan dinamik. Dengan memahami cara menggunakan useState dalam komponen berfungsi dan this.state dalam komponen kelas, anda boleh mengurus data dinamik dalam apl anda dengan berkesan. Ingatlah untuk mengikuti amalan terbaik seperti menaikkan keadaan dan mengekalkan keadaan setempat untuk mengurangkan kerumitan dan memastikan prestasi optimum.

---

Atas ialah kandungan terperinci Panduan Komprehensif untuk Keadaan Bertindak balas: Mengurus Data Dinamik dalam Komponen Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!