React Js 部分生命週期方法和 React 中的鉤子-js教程-PHP中文網

React Js Part Lifecycle Methods and Hooks in 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>
  );
};

登入後複製