進階：React 中的生命週期方法和 Hooks

作為一名高級開發人員，您不僅需要理解而且能夠熟練地實現先進的 React 概念，以構建健壯、可維護和可擴展的應用程序。本文深入探討了基本鉤子、自訂鉤子和進階鉤子模式，例如使用 useReducer 管理複雜狀態以及使用 useMemo 和 useCallback 優化效能。

React Hook 簡介

React Hooks 是在 React 16.8 中引入的，可讓您在不編寫類別的情況下使用狀態和其他 React 功能。 Hooks 提供了一種更實用、更模組化的方法來處理元件邏輯。

Hook 的主要優點

1. 更簡潔的程式碼： 掛鉤使功能元件能夠處理狀態和生命週期方法，從而產生更具可讀性和可維護性的程式碼。
2. 可重複使用性：自訂掛鉤可讓您跨多個元件擷取和重複使用有狀態邏輯。
3. 簡單性： Hooks 提供了更簡單的 API 來管理元件狀態和副作用。

必備掛鉤

使用狀態

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...'}