Menguasai React's useState Hook: Asas dan Kes Penggunaan Lanjutan

gunakanState Hook dalam React

Cangkuk useState ialah salah satu cangkuk yang paling biasa digunakan dalam React. Ia membolehkan anda menambah keadaan pada komponen berfungsi anda. Sebelum cangkuk diperkenalkan, keadaan hanya boleh digunakan dalam komponen kelas, tetapi useState membolehkan anda mempunyai keadaan dalam komponen berfungsi juga. Ini menjadikan komponen berfungsi lebih berkuasa dan fleksibel.

Apakah useState?

useState ialah fungsi yang membolehkan anda mengisytiharkan pembolehubah keadaan dalam komponen berfungsi. Ia mengembalikan tatasusunan dengan dua elemen:

1. Nilai keadaan semasa — nilai keadaan sebenar yang boleh anda akses dan paparkan dalam komponen anda.
2. Fungsi untuk mengemas kini keadaan itu — fungsi yang membolehkan anda menukar nilai pembolehubah keadaan.

Sintaks

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

• keadaan ialah nilai keadaan semasa.
• setState ialah fungsi yang anda gunakan untuk mengemas kini keadaan.
• initialState ialah nilai awal yang akan dimiliki oleh keadaan apabila komponen pertama kali dipaparkan.

Contoh Penggunaan

Contoh Asas:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);  // Initial state is set to 0

  const increment = () => {
    setCount(count + 1);  // Update state using the setCount function
  };

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

export default Counter;

• Penjelasan:
  • useState(0) menetapkan nilai kiraan awal kepada 0.
  • setCount digunakan untuk mengemas kini kiraan apabila butang diklik, yang mencetuskan pemaparan semula dengan kiraan yang dikemas kini.

Menggunakan Kemas Kini Berfungsi:

Apabila keadaan baharu bergantung pada keadaan sebelumnya, anda boleh menghantar fungsi kepada setState. Ini memastikan kemas kini berlaku berdasarkan nilai keadaan terkini.

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

const increment = () => {
  setCount(prevCount => prevCount + 1);  // Functional update to ensure accurate state updates
};

• Penjelasan: Di sini, prevCount ialah nilai keadaan sebelumnya dan fungsi mengembalikan keadaan baharu berdasarkan nilai tersebut.

Pembolehubah Keadaan Berbilang:

Anda boleh menggunakan useState beberapa kali dalam komponen untuk mengurus bahagian keadaan yang berbeza.

import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Name: {name}</p>
      <button onClick={() => setName('Doe')}>Change Name</button>
    </div>
  );
};

• Penjelasan: Di sini, dua pembolehubah keadaan berasingan (kiraan dan nama) diurus secara bebas.

Permulaan Malas

Jika keadaan awal kompleks atau memerlukan pengiraan, anda boleh lulus fungsi untuk useState yang hanya akan berjalan apabila komponen pertama kali dipaparkan.

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

• Penjelasan: Teknik ini berguna jika anda ingin memulakan keadaan berdasarkan pengiraan atau kesan sampingan yang perlu dikira sekali semasa pemaparan awal.

Mengemaskini Keadaan dengan Objek atau Tatasusunan

Jika keadaan anda ialah objek atau tatasusunan, fungsi setState hanya mengemas kini bahagian tertentu keadaan yang anda sediakan. React tidak melakukan cantuman dalam, jadi anda perlu mengemas kini keseluruhan objek keadaan secara eksplisit jika anda ingin menukar mana-mana bahagian daripadanya.

Mengemaskini Keadaan Objek:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);  // Initial state is set to 0

  const increment = () => {
    setCount(count + 1);  // Update state using the setCount function
  };

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

export default Counter;

• Penjelasan: setUser digunakan untuk mengemas kini objek keadaan dengan menyebarkan keadaan sebelumnya dan menukar sifat nama.

Mengemas kini Keadaan Tatasusunan:

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

const increment = () => {
  setCount(prevCount => prevCount + 1);  // Functional update to ensure accurate state updates
};

• Penjelasan: Kami menggunakan operator spread (...prevItems) untuk mencipta tatasusunan baharu dengan item sebelumnya dan item baharu ('oren').

Perangkap Biasa yang Perlu Dielakkan

1. Mengubah suai keadaan secara langsung: Jangan sekali-kali mengubah suai keadaan secara langsung (cth., negeri = newState). Sentiasa gunakan fungsi setState untuk memastikan React mengemas kini DOM dengan betul.

import React, { useState } from 'react';

const MultiStateComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Name: {name}</p>
      <button onClick={() => setName('Doe')}>Change Name</button>
    </div>
  );
};

1. Kemas kini keadaan tidak segerak: Kemas kini keadaan kelompok tindak balas, bermakna keadaan mungkin tidak dikemas kini serta-merta selepas memanggil setState. Ini amat penting apabila menggunakan keadaan sebelumnya untuk mengira keadaan baharu.

Ringkasan keadaan penggunaan:

• useState membolehkan anda menambah keadaan pada komponen berfungsi.
• Ia mengembalikan tatasusunan: keadaan semasa dan fungsi untuk mengemas kininya.
• Keadaan awal boleh menjadi nilai (seperti nombor, rentetan atau boolean) atau objek/tatasusunan.
• Anda boleh menggunakan berbilang panggilan useState untuk mengurus bahagian keadaan yang berbeza dalam komponen.
• Kemas kini negeri adalah tidak segerak dan tidak boleh dilakukan secara langsung.

Kesimpulan

Kait useState ialah blok binaan asas dalam React untuk mengurus keadaan komponen. Ia membolehkan komponen berfungsi mempunyai keadaan setempat mereka sendiri, menjadikan kod lebih modular dan lebih mudah difahami. Dengan menggunakan useState, anda boleh membina komponen dinamik dan interaktif yang bertindak balas kepada input atau peristiwa pengguna.

Atas ialah kandungan terperinci Menguasai React's useState Hook: Asas dan Kes Penggunaan Lanjutan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!