React.js如何使用Hooks

React Hooks 是 React 16.8 版本引入的一個新特性，它允許你在不編寫類（class）的情況下使用 state 和其他 React 特性。Hooks 主要有以下幾種：

1. useState：用于在函數組件中添加 state。
2. useEffect：用于在函數組件中執行副作用操作，如數據獲取、訂閱或手動更改 DOM。
3. useContext：用于在函數組件中訪問 React context。
4. useReducer：用于在函數組件中管理復雜的狀態邏輯。
5. useCallback：用于在函數組件中緩存回調函數。
6. useMemo：用于在函數組件中緩存計算結果。
7. useRef：用于在函數組件中訪問和修改 DOM 元素。
8. customHooks：用于創建自定義 Hooks。

下面是一些使用 Hooks 的示例：

1. useState

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

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  });

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

3. useContext

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

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button theme={theme}>I am styled by theme context!</button>;
}

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

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}

這些示例展示了如何在函數組件中使用 Hooks。你可以根據需要選擇合適的 Hook，并在項目中使用它們。