1. 引入Hooks：
2. React Hooks 是 React 16.8 版本引入的新特性，可以讓你在無需編寫類組件的情況下，在函數(shù)組件中使用狀態(tài)（state）和其他 React 特性。
3. 常用的React Hook:

• useState：用于在函數(shù)組件中創(chuàng)建和管理狀態(tài)。
• useEffect：用于處理副作用操作，例如數(shù)據(jù)獲取、訂閱事件等。
• useContext：用于在函數(shù)組件中使用上下文（context）。
• useReducer：類似于Redux中的reducer，用于處理復雜的狀態(tài)邏輯。
• useCallback：用于緩存回調(diào)函數(shù)，優(yōu)化性能。
• useMemo：用于緩存計算結(jié)果，優(yōu)化性能。
• useRef：用于在函數(shù)組件之間保存可變值。

1. 使用規(guī)則：

• 只能在函數(shù)組件的頂層使用Hook。不能在循環(huán)、條件語句或嵌套函數(shù)中使用。
• 在自定義Hook中使用其他Hook，以重用狀態(tài)邏輯。
• Hook 的命名約定以 "use" 開頭，這樣可以讓 linter 自動檢測到其使用規(guī)則。

1. useState示例：

jsx
復制代碼
import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

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

1. useEffect示例：

jsx
復制代碼
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // 在組件渲染后執(zhí)行副作用操作，比如數(shù)據(jù)獲取
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    setData(data);
  };

  return (
    <div>
      {/* 渲染data */}
    </div>
  );
};