React Hooks 介绍以及用法

React 钩子（Hooks）概览

React 钩子（Hooks）是 React 16.8 引入的功能，允许在函数组件中使用状态和其他 React 特性。以下是 React 常用的内置钩子及其功能描述。

组件生命周期

beforMount：挂载前
didmount: 挂载完成
unmount：卸载

1. 基础钩子

useState

功能：在函数组件中添加状态管理。
用法：const [state, setState] = useState(initialState);
示例：

import React, { useState } from 'react';

function App() {
  // 初始状态为 0
  const [count, setCount] = useState(0)

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

  return (
    <>
      <button onClick={handleClick}type="button">按钮</button>
      <p style={{ textAlign: 'center' }}>
        {count}
      </p>
    </>
  );
}

export default App;

useEffect

功能：处理副作用（如数据获取、订阅、DOM 操作），可通过依赖数组控制执行时机。
用法：useEffect(() => { ... }, [dependencies]);
示例：

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

useContext

功能：访问 React 上下文（Context），用于在组件树中共享数据。
用法：const value = useContext(MyContext);
示例：

const theme = useContext(ThemeContext);

2. 额外的内置钩子

useReducer

功能：管理复杂状态逻辑，类似于 Redux 的 reducer 模式。
用法：const [state, dispatch] = useReducer(reducer, initialState);
示例：

const [state, dispatch] = useReducer(reducer, { count: 0 });

useCallback

功能：返回记忆化的回调函数，避免不必要的重新创建，优化性能。
用法：const memoizedCallback = useCallback(() => { ... }, [dependencies]);
示例：

const memoizedFn = useCallback(() => doSomething(a, b), [a, b]);

useMemo
功能：返回记忆化的值，避免昂贵的计算重复执行。
用法：const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
示例：

const memoizedValue = useMemo(() => expensiveCalculation(data), [data]);

useRef
功能：创建可变的引用对象，常用于访问 DOM 或保存跨渲染的变量。
用法：const ref = useRef(initialValue);
示例：

const inputRef = useRef(null);

useImperativeHandle

功能：自定义通过 ref 暴露给父组件的实例值。
用法：useImperativeHandle(ref, () => ({ ... }));
示例：

useImperativeHandle(ref, () => ({
  focus: () => inputRef.current.focus(),
}));

useLayoutEffect
功能：与 useEffect 类似，但在 DOM 更新后同步执行，适合需要同步读取 DOM 布局的场景。
用法：useLayoutEffect(() => { ... }, [dependencies]);
示例：

useLayoutEffect(() => {
  const rect = ref.current.getBoundingClientRect();
}, []);

useDebugValue
功能：在 React 开发者工具中为自定义钩子显示调试信息。
用法：useDebugValue(value);
示例：

useDebugValue(isLoading ? 'Loading...' : 'Loaded');

3. React 18 引入的钩子

useId

功能：生成唯一的 ID，适合无障碍（a11y）场景或表单元素。
用法：const id = useId();
示例：

const id = useId();
<label htmlFor={id}>Name</label>

useTransition

功能：标记非紧急的状态更新，优化用户体验。
用法：const [isPending, startTransition] = useTransition();
示例：

startTransition(() => {
  setSearchQuery(value);
});

useDeferredValue
功能：延迟更新值，优化高频更新的性能。
用法：const deferredValue = useDeferredValue(value);
示例：

const deferredQuery = useDeferredValue(query);

useSyncExternalStore
功能：订阅外部存储（如浏览器 API 或第三方状态），确保与 React 状态同步。
用法：const state = useSyncExternalStore(subscribe, getSnapshot);
示例：

const windowSize = useSyncExternalStore(subscribe, () => window.innerWidth);

4. 自定义钩子

React 允许开发者通过组合内置钩子创建自定义钩子，需以 use 开头。例如：

function useWindowSize() {
  const [size, setSize] = useState(window.innerWidth);
  useEffect(() => {
    const handler = () => setSize(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return size;
}

注意事项

钩子规则：
仅在函数组件或自定义钩子中调用钩子。
不要在循环、条件语句或嵌套函数中调用钩子。
确保钩子调用顺序一致。

依赖数组：useEffect、useCallback、useMemo 等依赖数组需包含所有使用的外部变量，以避免逻辑错误。