React Hooks 重點-js教程-PHP中文網

React Hooks Essentials

概念亮點：

什麼是 Hook？
為什麼要使用 Hook？
useState
使用效果
使用Reducer
useRef
自訂掛鉤
使用 dispacth 切換
UseHooks.com 是什麼？

1. 什麼是 Hooks 以及為什麼

在 React 中，Hooks 是特殊函數，可讓您在功能元件中使用狀態和其他 React 功能，而無需將它們轉換為類別元件。 React 16.8 中引入的鉤子使元件之間的邏輯重用、處理狀態管理以及管理資料獲取或訂閱等副作用變得更加容易，所有這些都在功能組件內進行。

2. 為什麼要使用鉤子？

更簡潔的程式碼： 掛鉤可讓您直接在功能元件中管理狀態和副作用，從而簡化了元件的結構。
可重複使用性：自訂掛鉤可讓您重複使用有狀態邏輯，而無需複製程式碼或重組元件。
功能元件： Hooks 讓您能夠編寫與類別元件一樣強大的功能元件，從而形成更一致的程式碼庫。

3. 使用狀態

useState 鉤子是管理功能元件狀態的基礎。您可以使用此鉤子無縫管理狀態，而不是透過 this.setState() 使用類別元件。

文法：

const [state, setState] = useState(initialState);

登入後複製

例如） 在此範例中，它使用值 0 初始化 count，並在按一下按鈕時使用 setCount 函數更新它。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

登入後複製

4.使用效果

useEffect 掛鉤可讓您處理元件中的副作用，例如取得資料、更新 DOM 或訂閱事件。

文法：

useEffect(() => {
  // Side effect logic
  return () => {
    // Cleanup
  };
}, [dependencies]);

登入後複製

例如） 在此範例中，useEffect 在元件安裝時從 API 取得資料。空數組 [] 作為第二個參數確保效果只會運行一次（如 componentDidMount）。

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

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

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

  return (
    <div>
      {data ? <p>{data.title}</p> : <p>Loading...</p>}
    </div>
  );
}

登入後複製

5.使用Reducer

當你的狀態邏輯變得更加複雜時，請考慮使用 useReducer 而不是 useState。它與 Redux 類似，但在組件層級。您可以使用它來管理基於操作類型的狀態轉換。

文法：

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

登入後複製

例如） 在此範例中，useReducer 處理兩個操作：遞增和遞減。您可以使用調度來根據這些操作觸發狀態更新。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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, initialState);

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

登入後複製

6.useRef

useRef 鉤子提供了一種直接存取和操作 DOM 元素或跨渲染儲存可變值的方法，而不會導致重新渲染。

文法：

const myRef = useRef(initialValue);

登入後複製

例如） 在此範例中，useRef 允許直接存取輸入字段，從而能夠在單擊按鈕時以編程方式將其聚焦。

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

登入後複製

7. 自訂掛鉤

鉤子的強大功能之一是您可以建立自訂鉤子來封裝和重複使用跨元件的邏輯。自訂鉤子從使用開始，只是可以使用其他鉤子的常規 JavaScript 函數。

例如） 在此範例中，useFetch 鉤子處理資料取得邏輯，並且可以在多個元件中重複使用。

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

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

  return { data, loading };
}

function App() {
  const { data, loading } = useFetch('https://api.example.com/data');

  return <div>{loading ? <p>Loading...</p> : <p>{data.title}</p>}</div>;
}

登入後複製

8. 與調度切換

dispatch 方法可以與 useReducer 結合使用來建立切換狀態，這有助於處理模態、下拉清單或切換主題等元件。

例如） 調度方法中的切換操作在 true 和 false 之間切換 isVisible 狀態，從而切換內容的可見性。

import React, { useReducer } from 'react';

const initialState = { isVisible: false };

function reducer(state, action) {
  switch (action.type) {
    case 'toggle':
      return { isVisible: !state.isVisible };
    default:
      return state;
  }
}

function ToggleComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <button onClick={() => dispatch({ type: 'toggle' })}>
        {state.isVisible ? 'Hide' : 'Show'} Details
      </button>
      {state.isVisible && <p>Here are the details...</p>}
    </div>
  );
}

登入後複製