反應鉤子-js教程-PHP中文網

反應鉤子

WBOY

發布： 2024-08-29 12:13:02

原創

850 人瀏覽過

React Hooks

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>;
  }

登入後複製