反應鉤子

React Hooks 是允許您在功能元件中使用狀態和其他 React 功能的函數，這些函數傳統上僅在類別元件中可用。它們在 React 16.8 中引入，並從此成為編寫 React 元件的標準。以下是最常用鉤子的細分：

1. useState

• 用途：管理功能組件中的狀態。
• 用法：

  import React, { useState } from 'react';

  function Counter() {
    const [count, setCount] = useState(0); // Declare a state variable called 'count'

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

• 說明：useState 傳回一個包含兩個元素的陣列：目前狀態值 (count) 和更新它的函數 (setCount)。這允許您維護和更新功能組件內的狀態。

2. 使用效果

• 用途：處理副作用，例如取得資料、訂閱或手動變更功能元件中的 DOM。
• 用法：

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

  function Example() {
    const [data, setData] = useState(null);

    useEffect(() => {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => setData(data));
    }, []); // Empty dependency array means this effect runs once after the initial render.

    return <div>{data ? data : 'Loading...'}</div>;
  }

• 說明：useEffect 有兩個參數：一個運作效果的函數和一個可選的依賴陣列。效果函數在元件渲染後運行。如果您提供依賴項數組，則僅當這些相依性發生變更時才會執行效果。

3. useContext

• 用途：存取功能組件內上下文的值。
• 用法：

  import React, { useContext } from 'react';
  const ThemeContext = React.createContext('light');

  function DisplayTheme() {
    const theme = useContext(ThemeContext); // Access the current theme context value

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

• 說明：useContext 允許您直接在功能元件中使用上下文值，而不需要 Consumer 元件。

4. 使用Reducer

• 用途：管理功能元件中的複雜狀態邏輯，作為useState的替代方案。
• 用法：

  import React, { useReducer } from 'react';

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

  function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

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

• 說明：useReducer 對於管理依賴更複雜邏輯或多個操作的狀態很有用。它接受一個減速器函數和一個初始狀態，並傳回當前狀態和一個調度函數。

5. useRef

• 用途：存取並儲存對跨渲染持續存在的 DOM 元素或值的可變引用。
• 用法：

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

  function TextInputWithFocusButton() {
    const inputEl = useRef(null);

    const onButtonClick = () => {
      inputEl.current.focus(); // Access the DOM element directly
    };

    return (
      <>
        <input ref={inputEl} type="text" />
        <button onClick={onButtonClick}>Focus the input</button>
      </>
    );
  }

• 說明：useRef 傳回一個帶有 .current 屬性的可變對象，該屬性可以保存值或對 DOM 元素的參考。該值在渲染過程中保持不變，更新時不會觸發重新渲染。

6. useMemo 和 useCallback

• 目的：透過記憶昂貴的計算或函數來最佳化表現。
• 用法：

  import React, { useMemo, useCallback } from 'react';

  function Example({ items }) {
    const expensiveCalculation = useMemo(() => {
      return items.reduce((a, b) => a + b, 0);
    }, [items]);

    const memoizedCallback = useCallback(() => {
      console.log('This function is memoized');
    }, []);

    return <div>{expensiveCalculation}</div>;
  }

• 說明：useMemo 會記住計算值，僅當其依賴項發生變化時才重新計算它。 useCallback 記憶函數，確保僅在其依賴項發生變化時才重新定義它。

為什麼 Hook 有用

• 更簡潔的程式碼：Hooks 允許您編寫更簡潔、更易讀的程式碼，而不需要類別元件。
• 可重用性：Hooks 可以在不同的元件之間重複使用，甚至可以在項目之間共用。
• 功能元件中的狀態邏輯：掛鉤可讓您管理功能元件中的狀態和副作用，使它們與類別元件一樣強大。

Hooks 改變了開發人員編寫 React 應用程式的方式，使功能元件更強大且更易於管理。

以上是反應鉤子的詳細內容。更多資訊請關注PHP中文網其他相關文章！