日狀態與生命週期方法 - ReactJS

歡迎來到「ReactJS 30 天」挑戰的第五天！今天，我們將探討 React 中的兩個基本概念：狀態和生命週期方法。了解這些將使您能夠創建動態的互動式應用程式。

什麼是狀態？

React 中的

State 指的是內建對象，它保存的資訊可能會在組件的生命週期內發生變化。與唯讀並從父元件傳遞下來的 props 不同，state 是元件本地的並且可以在內部修改。

將狀態想像成黑板。您可以根據需要在其上寫入和擦除訊息，從而使您的組件能夠適應變化，例如用戶輸入或資料獲取。

範例：計數器組件

讓我們建立一個簡單的計數器元件，當點擊按鈕時它會增加計數：

import { useState } from 'react';

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

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

這裡，useState 是一個 React hook，允許你為功能元件新增狀態。 count 變數儲存目前狀態，setCount 是更新它的函數。

什麼是生命週期方法？

生命週期方法是React類別元件中的特殊方法，可讓您在元件生命週期的特定點​​執行程式碼。這個生命週期包括掛載（新增到 DOM）、更新（重新渲染）和卸載（從 DOM 中刪除）。

儘管隨著 React hooks 的引入，類別元件變得越來越不常見，但理解生命週期方法仍然很重要，特別是在使用較舊的程式碼庫時。

範例：componentDidMount

常見的生命週期方法是 componentDidMount，它在元件首次渲染後運行。它通常用於初始化數據，例如從 API 獲取數據：

class DataFetcher extends React.Component {
  state = { data: null };

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <div>
        {this.state.data ? (
          <p>Data: {this.state.data}</p>
        ) : (
          <p>Loading...</p>
        )}
      </div>
    );
  }
}

在此範例中，一旦元件新增至 DOM，componentDidMount 就會取得數據，並使用所取得的資料更新狀態。

現實生活範例：餐廳訂單
想像一下在餐廳下訂單（組件安裝）。您下訂單後，廚房就開始準備食物 (componentDidMount)。當食物正在準備（更新）時，您可能會收到狀態更新。最後，食物端上來，您吃完飯（組件卸載）。

Vite 的狀態與生命週期

由於我們使用 Vite 作為開發環境，因此設定狀態和生命週期方法是無縫的。 Vite 的快速開發伺服器可確保您的狀態變更和生命週期方法在開發過程中幾乎立即反映出來。

以下是如何建構專案以包含狀態和生命週期方法：

1. 初始化狀態：在功能元件中使用useState來管理動態資料。
2. 生命週期的類別元件：如果您使用類別元件，請實作諸如 componentDidMount 和 componentWillUnmount 之類的生命週期方法來管理副作用。

總結

狀態和生命週期方法對於建立動態、響應式的 React 應用程式至關重要。狀態允許您的元件進行交互，而生命週期方法使您可以控制元件與 DOM 交互的方式和時間。

明天，我們將探索 React 中的處理事件，這將進一步增強應用程式的互動性。

以上是日狀態與生命週期方法 - ReactJS的詳細內容。更多資訊請關注PHP中文網其他相關文章！