React Hooks 是 React 16.8 引入的新特性，允许你在函数组件中使用状态和其他 React 特性，而不需要编写类组件。

1. 基础 Hooks

useState

用于在函数组件中添加状态。

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

• initialState: 状态的初始值。
• state: 当前状态值。
• setState: 更新状态的函数。

useEffect

用于在函数组件中执行副作用操作（如数据获取、DOM 操作等）。

jsx
useEffect(() => {
  // 副作用操作
  return () => {
    // 清理操作（可选）
  };
}, [dependencies]);

• dependencies: 依赖项数组，当数组中的值发生变化时，副作用函数会重新执行。

useContext

用于在函数组件中访问 React 的 Context。

jsx
const value = useContext(MyContext);

• MyContext: 创建的 Context 对象。
• value: Context 中的值。

2. 额外的 Hooks

useReducer

用于在函数组件中管理复杂的状态逻辑。

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

• reducer: 状态更新函数。
• initialState: 初始状态。
• init: 可选的初始化函数。
• state: 当前状态。
• dispatch: 分发 action 的函数。

useCallback

用于缓存函数，避免在每次渲染时重新创建函数。

jsx
const memoizedCallback = useCallback(() => {
  // 函数体
}, [dependencies]);

• dependencies: 依赖项数组，当数组中的值发生变化时，函数会重新创建。

useMemo

用于缓存计算结果，避免在每次渲染时重新计算。

jsx
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• computeExpensiveValue: 计算函数。
• dependencies: 依赖项数组，当数组中的值发生变化时，计算函数会重新执行。

useRef

用于在函数组件中创建一个可变的引用，通常用于访问 DOM 元素或保存可变值。

jsx
const refContainer = useRef(initialValue);

• initialValue: 初始值。
• refContainer.current: 引用的当前值。

3. 其他 Hooks

useImperativeHandle

用于自定义通过 ref 暴露给父组件的实例值。

jsx
useImperativeHandle(ref, createHandle, [dependencies]);

• ref: 传递给组件的 ref。
• createHandle: 创建要暴露的实例值的函数。
• dependencies: 依赖项数组。

useLayoutEffect

与 useEffect 类似，但在所有 DOM 变更之后同步调用。主要用于测量布局。

jsx
useLayoutEffect(() => {
  // 副作用操作
  return () => {
    // 清理操作（可选）
  };
}, [dependencies]);

useDebugValue

用于在 React DevTools 中显示自定义 Hook 的标签。

jsx
useDebugValue(value);

• value: 要显示的值。

4. 自定义 Hooks

你可以根据需要创建自定义 Hooks，以复用逻辑。自定义 Hooks 的命名通常以 use 开头。

jsx
function useCustomHook() {
  const [state, setState] = useState(initialState);
  // 其他逻辑
  return state;
}