Pengurusan Negeri dalam Reaksi: Bila Menggunakan useState, useReducer, dan useRef

Mengurus keadaan ialah aspek asas untuk membangunkan aplikasi React. Memahami masa untuk menggunakan useState, useReducer, atau useRef boleh meningkatkan prestasi dan kebolehselenggaraan aplikasi anda. Artikel ini meneroka setiap cangkuk ini dan memberikan panduan tentang kes penggunaan yang sesuai.

Pengenalan kepada Pengurusan Negeri dalam React

React menyediakan beberapa cangkuk untuk menguruskan keadaan dan kesan sampingan lain dalam komponen berfungsi, setiap satu mempunyai tujuan yang berbeza dan sesuai untuk senario yang berbeza.

1. useState: Menguruskan Peralihan Keadaan Mudah

useState ialah cangkuk paling mudah untuk menguruskan keadaan dalam React. Ia sesuai untuk mengendalikan peralihan keadaan mudah di mana keadaan seterusnya tidak bergantung pada keadaan sebelumnya.

• Kes Penggunaan:

  • Nilai borang tempatan
  • Togol (cth., tunjukkan/sembunyikan, didayakan/dilumpuhkan)
  • Sebarang keadaan mudah lain yang tidak melibatkan logik kompleks atau kemas kini mendalam

• Contoh:
  
  

  function ToggleComponent() {
    const [isToggled, setToggle] = useState(false);

    return (
      <button onClick={() => setToggle(!isToggled)}>
        {isToggled ? 'ON' : 'OFF'}
      </button>
    );
  }
    ```



## 2. useReducer: Managing Complex State Logic

`useReducer` is more suited for cases where the next state depends on the previous one, or when the state logic is complex, involving multiple sub-values or when the next state depends on multiple previous states.

- **Use Cases**:
  - Complex forms or user inputs
  - States that depend on previous states
  - Handling multiple states tightly coupled together

- **Example**:



```jsx
function Counter() {
  const [state, dispatch] = useReducer((state, action) => {
    switch (action.type) {
      case 'increment':
        return { count: state.count + 1 };
      case 'decrement':
        return { count: state.count - 1 };
      default:
        throw new Error();
    }
  }, { count: 0 });

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

3. useRef: Mengakses Nod DOM dan Menyimpan Nilai Boleh Berubah

useRef digunakan untuk mengakses nod DOM secara langsung dan untuk mengekalkan sebarang nilai boleh ubah sepanjang hayat komponen. Ia berguna untuk lebih daripada sekadar rujukan.

• Kes Penggunaan:

  • Mengurus fokus, pemilihan teks atau main balik media
  • Mencetuskan animasi imperatif
  • Menyimpan nilai boleh ubah yang tidak menyebabkan pemaparan semula apabila dikemas kini

• Contoh:
  
  

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Kesimpulan: Memilih Cangkuk yang Tepat untuk Pengurusan Negeri

Dalam React, memilih cangkuk pengurusan keadaan yang betul bergantung pada kerumitan keadaan dan cara ia berinteraksi dengan keadaan lain atau kitaran hayat komponen. useState sesuai untuk keadaan mudah, useReducer untuk interaksi keadaan yang lebih kompleks dan useRef untuk mengurus rujukan dan data boleh ubah tanpa pemaparan semula.

Fikiran Akhir

Memahami bila dan sebab untuk menggunakan setiap cangkuk React untuk pengurusan negeri bukan sahaja akan menjadikan kod anda lebih bersih dan cekap tetapi juga lebih mudah untuk diselenggara dan nyahpepijat. Eksperimen dengan cangkuk ini untuk mencari cara paling berkesan untuk mengurus keadaan dalam aplikasi React anda.

Atas ialah kandungan terperinci Pengurusan Negeri dalam Reaksi: Bila Menggunakan useState, useReducer, dan useRef. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!