React Js 部分生命週期方法和 React 中的鉤子

React 是一個 JavaScript 函式庫，它允許我們以宣告方式建立使用者介面。 React 的關鍵概念之一是我們如何管理元件的生命週期。在本文中，我們將討論兩個主要面向：類別元件中的生命週期方法和 Hook。

1. 類別組件中的生命週期方法

生命週期方法是在元件生命週期的不同階段呼叫的特殊方法。以下是一些最常見的生命週期方法及其用途：

一個。安裝

• constructor(props)：呼叫的第一個方法。通常用於初始化狀態和綁定方法。

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

• componentDidMount()：在元件首次安裝到 DOM 後呼叫。非常適合數據獲取或初始化訂閱。

componentDidMount() {
  this.fetchData();
}

b.更新中

componentDidUpdate(prevProps, prevState)：元件更新後呼叫。對於響應 props 或狀態的變化很有用。請務必檢查更改以避免無限循環。

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

c.卸載

componentWillUnmount()：在元件從 DOM 刪除之前呼叫。對於清理訂閱、計時器或其他需要清理的操作很有用。

componentWillUnmount() {
  this.cleanup();
}

d.錯誤處理

componentDidCatch(error, info)：用於捕捉子元件中的錯誤。對於集中錯誤處理很有用。

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

2.React Hooks簡介

React Hooks 是一個允許我們使用狀態和生命週期方法而無需編寫類別組件的函數。以下是一些最常用的 Hook：

一個。使用狀態()

用於新增狀態至功能組件。該函數傳回一對：當前狀態和更新它的函數。

import React, { useState } from 'react';

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

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

b.使用效果()

useEffect 讓我們在功能組件中運行副作用。它結合了 componentDidMount、componentDidUpdate 和 componentWillUnmount 的功能。

• 範例 1：使用空數組 ([]) 的 useEffect 當 useEffect 與空數組作為相依性一起使用時，效果僅在元件安裝後執行一次。

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

• 範例 2：不使用依賴陣列的 useEffect 如果提供的 useEffect 沒有相依性數組，則每次元件重新渲染時都會執行效果。

componentDidMount() {
  this.fetchData();
}

• 範例 3：具有相依性陣列的 useEffect 當您提供依賴項數組時，只要數組中的某個值發生更改，就會運行效果。

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

c.使用上下文（）

useContext Hook 用於存取功能組件中的上下文。這對於共享全域資料（例如主題或使用者身份驗證狀態）特別有用，無需進行道具鑽探。

範例：使用 useContext 進行主題化
在此範例中，我們將建立一個簡單的主題上下文，讓我們可以在淺色和深色主題之間切換。

1。建立主題上下文
首先，我們為主題建立一個上下文。

componentWillUnmount() {
  this.cleanup();
}

2。使用主題上下文
接下來，我們可以建立一個元件，該元件使用主題上下文來套用樣式並提供一個按鈕來切換主題。

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

3。使用主題提供者包裝應用程式
最後，我們用 ThemeProvider 包裝我們的應用程式（或其一部分），為其子層級提供主題上下文。

import React, { useState } from 'react';

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

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

說明

• 主題上下文建立：我們使用 createContext 和 ThemeProvider 元件建立一個 ThemeContext，管理目前主題狀態並提供切換它的功能。

• 上下文消耗：在 ThemedComponent 中，我們使用 useContext(ThemeContext) 來存取目前主題和切換功能。該元件根據當前主題呈現不同的內容，並包含一個切換它的按鈕。

• 應用程式結構：整個應用程式（或其一部分）包裝在 ThemeProvider 中，允許任何子元件存取主題上下文。

d. useMemo() 和 useCallback()

• useMemo()：快取昂貴計算的結果，以避免每次渲染時重新計算。

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

const FetchDataOnce = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []); // Effect runs only once when the component mounts

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

• useCallback()：快取函數以避免在每次渲染時重新建立它們。

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

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

  useEffect(() => {
    console.log(`Count updated: ${count}`);

    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data/${count}`);
      const result = await response.json();
      console.log(result);
    };

    fetchData();
  }); // Effect runs every time the component renders

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

3. 使用 Hook 的優點

鉤子提供了靈活性以及在組件之間共享邏輯的能力，而無需使用高階組件（HOC）或渲染道具。使用 Hooks 的一些優點包括：

• 簡單清晰：程式碼變得更乾淨、更容易閱讀。
• 靈活性：邏輯可以分成更小的函數，可以在任何地方重複使用。
• 降低複雜度：避免使用類別和複雜的生命週期方法。

---

生命週期方法和 Hooks 是 React 開發的兩個重要面向。了解這兩個概念如何運作使我們能夠創建更有效率且可維護的元件。特別是 Hook，為開發功能元件開闢了新的可能性，改變了我們與狀態和副作用互動的方式。

透過掌握生命週期方法和 Hook，您將能夠建立更強壯、反應更快的 React 應用程式。快樂編碼！

以上是React Js 部分生命週期方法和 React 中的鉤子的詳細內容。更多資訊請關注PHP中文網其他相關文章！