中級：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...'}

); }; export default DataFetcher;

登入後複製

在此範例中，useEffect 在元件掛載時從 API 取得資料。

使用上下文

useContext 是一個鉤子，可讓您存取給定上下文的上下文值。

範例：

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);

  return <div>The current theme is {theme}</div>;
};

export default ThemedComponent;

在此範例中，useContext 存取 ThemeContext 的目前值。

使用Reducer

useReducer 是一個鉤子，可讓您管理功能元件中的複雜狀態邏輯。它是 useState 的替代方案。

範例：

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default Counter;

在這個範例中，useReducer 使用一個reducer 函數來管理計數狀態。

定制掛鉤

自訂掛鉤讓您可以跨多個元件重複使用有狀態邏輯。自訂鉤子是使用內建鉤子的函數。

範例：

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
};

const DataFetcher = ({ url }) => {
  const data = useFetch(url);

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

: 'Loading...'}

); }; export default DataFetcher;

登入後複製