React 中的 UseState 和 UseEffect Hook

在 React 中，useState 和 useEffect 是兩個基本的鉤子，用於管理功能元件中的狀態和處理副作用。

1.useState鉤子

useState 鉤子允許您向功能組件新增狀態。它傳回一個包含兩個元素的陣列：

1. 目前狀態值。
2. 更新狀態值的函數。

範例：

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable called 'count' with an initial value of 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* Update state using the setCount function */}
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

export default Counter;

在此範例中：

• useState(0) 將計數狀態變數初始化為 0。
• setCount 用於在按一下按鈕時更新狀態。

2.useEffect鉤子

useEffect 鉤子可讓您在元件中執行副作用，例如資料擷取、訂閱或手動變更 DOM。它需要兩個參數：

1. 包含副作用邏輯的函數。
2. 可選的相依性數組，用於決定效果何時運作。

範例：

import React, { useState, useEffect } from 'react';

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

  // useEffect runs after every render, but the dependency array makes it run only when `count` changes
  useEffect(() => {
    document.title = `You clicked ${count} times`;

    // Cleanup function (optional)
    return () => {
      console.log('Cleanup for count:', count);
    };
  }, [count]); // Dependency array

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

export default Example;

在此範例中：

• 每當計數發生變化時，useEffect 就會更新文件標題。
• 如果計數發生變化，效果會在每次渲染後運行，因為計數包含在依賴項數組中。
• 可選的清理函數在效果再次運行之前或組件卸載時運行，這對於清理訂閱或計時器非常有用。

這兩個鉤子都有助於有效管理功能元件中的狀態和副作用，使 React 開發更加簡潔和強大。
.
.
.

讓我們總結一下...
.
.
.

以下是 React 中 useState 和 useEffect 鉤子的摘要：

使用狀態鉤子

• 用途：管理功能組件中的狀態。
• 語法： const [state, setState] = useState(initialValue);
• 參數：
  • 初始值：初始狀態值。
• 回傳：
  • 包含兩個元素的陣列：
  • state：目前狀態值。
  • setState：更新狀態的函數。

用法範例：

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

使用效果鉤子

• 用途：處理功能元件中的副作用，例如資料擷取、訂閱或手動 DOM 更新。
• 語法： useEffect(() => { /* 效果邏輯 */ }, [依賴項]);
• 參數：
  • 效果函數： 包含作為副作用運作的程式碼。
  • 依賴項數組（可選）： 更改時觸發效果的依賴項清單。如果為空，則效果僅在初始渲染後執行一次。如果省略，效果將在每次渲染後運行。
• 清理函數（可選）：效果函數傳回的函數，用於清理資源。

用法範例：

useEffect(() => {
  document.title = `You clicked ${count} times`;
  return () => {
    // Cleanup logic here
  };
}, [count]);

重點：

• useState 簡化了功能元件中的狀態管理。
• useEffect 處理副作用，並且可以選擇自行清理。
• 兩個鉤子協同工作，在 React 中建立動態、有狀態的功能元件。

以上是React 中的 UseState 和 UseEffect Hook的詳細內容。更多資訊請關注PHP中文網其他相關文章！