React.js中Hooks API怎么用

在React.js中，Hooks API是一種在函數組件中使用state和其他React特性的方法。Hooks API于2019年3月發布，它允許您在不編寫類組件的情況下使用state和其他React特性。以下是一些常用的Hooks及其用法：

1. useState

useState是一個讓函數組件具有state的方法。它接受一個初始值作為參數，并返回一個包含兩個元素的數組：當前狀態和一個用于更新狀態的函數。

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

2. useEffect

useEffect是一個用于處理副作用（如數據獲取、訂閱或手動更改DOM）的方法。它接受一個函數作為參數，該函數在組件掛載、更新和卸載時執行。

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

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []); // 空數組表示只在組件掛載時執行一次

  return (
    <div>
      {data.map((item) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </div>
  );
}

3. useContext

useContext允許您在函數組件中訪問React上下文（Context）。它接受一個上下文對象作為參數，并返回當前上下文的值。

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

function Button() {
  const theme = useContext(ThemeContext);

  return <button className={theme}>Click me</button>;
}

4. useReducer

useReducer是另一種管理組件state的方法，類似于useState。它接受一個reducer函數和一個初始狀態作為參數，并返回一個包含當前狀態和一個dispatch函數的數組。

import React, { useReducer } from 'react';

function 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:
      throw new Error();
  }
}

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

5. useCallback

useCallback返回一個記憶化的回調函數，只有當依賴項發生變化時，該函數才會重新創建。

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

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

  const increment = useCallback(() => {
    setCount((c) => c + 1);
  }, [count]); // 當count發生變化時，increment函數會重新創建

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

6. useMemo

useMemo返回一個記憶化的值，只有當依賴項發生變化時，該值才會重新計算。

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

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

  const doubleCount = useMemo(() => {
    return count * 2;
  }, [count]); // 當count發生變化時，doubleCount的值會重新計算

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

7. useRef

useRef返回一個可變的ref對象，其.current屬性被初始化為傳入的參數。您可以使用這個ref對象來訪問DOM元素。

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

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

這些是React Hooks API中最常用的一些Hooks。您可以根據需要組合和擴展它們，以實現更復雜的功能。