Mengapa Gunakan useState Daripada Hanya Pembolehubah dalam React

Mengapa Gunakan useState Daripada Hanya Pembolehubah dalam React

Pernahkah anda terfikir mengapa kami menggunakan useState dan bukannya pembolehubah dalam React? Mari kita terokai konsep ini dengan contoh kaunter yang mudah.

Contoh Kaunter Mudah

Bayangkan kita mempunyai kaunter asas dengan dua butang: satu untuk menambah kiraan dan satu untuk mengurangkannya. Jika kita mencipta kaunter ini menggunakan useState, ia berfungsi dengan sempurna. Walau bagaimanapun, jika kita cuba menggunakan pembolehubah biasa sahaja, ia tidak berfungsi seperti yang diharapkan.

import React, { useState } from 'react';

function Counter() {
  // Using useState to create a state variable
  const [count, setCount] = useState(0);

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

export default Counter;

Apakah useState?

useState ialah cangkuk dalam React yang membolehkan anda menambah keadaan pada komponen berfungsi. Keadaan adalah seperti memori yang digunakan oleh komponen untuk mengingati sesuatu dan mengemas kininya dari semasa ke semasa.

Mengapa Pembolehubah Tidak Berfungsi

Sebab menggunakan pembolehubah tidak berfungsi ialah React tidak menjejaki perubahan dalam pembolehubah biasa seperti yang dilakukan dengan keadaan yang diuruskan oleh useState. Apabila anda mengklik butang naik atau turun, useState memberitahu React bahawa keadaan telah berubah. Bertindak balas kemudian memaparkan semula komponen dan mengemas kini kiraan.

Walau bagaimanapun, dengan pembolehubah biasa, React tidak menyedari perubahan itu, jadi ia tidak mengemas kini kiraan.

import React from 'react';

function Counter() {
  // Using a regular variable
  let count = 0;

  const increase = () => {
    count += 1;
  };

  const decrease = () => {
    count -= 1;
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}

export default Counter;

Kesimpulan

Saya harap anda kini faham mengapa useState penting untuk pengurusan negeri dalam React. Ia membolehkan React menjejaki perubahan dan mengemas kini komponen dengan sewajarnya. Terima kasih atas masa anda dan saya akan jumpa anda tidak lama lagi!

Atas ialah kandungan terperinci Mengapa Gunakan useState Daripada Hanya Pembolehubah dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!