中級：React 中的生命週期方法和 Hook

作為一名中級開發人員，理解並有效使用 React Hooks 和生命週期方法對於建立健壯、可維護和可擴展的應用程式至關重要。本文將深入探討基本鉤子、自訂鉤子和進階鉤子模式，例如使用 useReducer 管理複雜狀態以及使用 useMemo 和 useCallback 優化效能。

React Hook 簡介

React Hooks 可讓您使用狀態和其他 React 功能，而無需編寫類別。 React 16.8 中引入的鉤子為狀態管理和生命週期方法提供了更簡單、更實用的方法。

Hook 的主要優點

1. 更簡單的程式碼： Hooks 讓您能夠直接在功能元件中使用狀態和生命週期方法，從而產生更具可讀性和可維護性的程式碼。
2. 重複使用邏輯：自訂掛鉤可讓您跨多個元件擷取和重複使用有狀態邏輯。
3. 增強的功能元件： Hooks 提供了類別元件的所有功能，例如管理狀態和副作用，而無需使用類別。

必備掛鉤

使用狀態

useState 是一個鉤子，可讓您為功能元件新增狀態。

範例：

import React, { useState } from 'react';

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

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

export default Counter;

在此範例中，useState 將 count 狀態變數初始化為 0。 setCount 函數在點選按鈕時更新狀態。

使用效果

useEffect 是一個鉤子，可讓您在功能元件中執行副作用，例如獲取資料、直接與 DOM 互動以及設定訂閱。它結合了類別元件中多個生命週期方法的功能（componentDidMount、componentDidUpdate 和 componentWillUnmount）。

範例：

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'}