17370845950

自定义 Hook 是 React 中复用状态和副作用逻辑的机制，本质是命名以 use 开头、可调用其他 Hook 的普通函数，用于解决跨组件逻辑重复问题，不复用 UI 或改变组件结构。

自定义 Hook 是 React 中复用逻辑的机制，不是 JavaScript 原生功能，而是 React 的约定式实践——它本质是一个普通 JavaScript 函数，函数名以 use 开头，内部可以调用其他 Hook（如 useState、useEffect 等），用于封装和共享组件中可复用的状态逻辑。

自定义 Hook 解决什么问题

当多个组件需要相同的状态逻辑（比如监听窗口大小、处理表单输入、连接 WebSocket），直接复制粘贴代码会导致重复和难以维护。自定义 Hook 把这部分逻辑抽出来，让组件只关注“做什么”，而不是“怎么做”。

注意：它不复用 UI，也不影响组件结构，只复用状态和副作用逻辑。

怎么写一个自定义 Hook

只需一个函数，命名以 use 开头，内部调用 React Hook，并返回你需要的数据或方法。

• 函数必须是纯函数（无副作用，不修改外部变量）
• 只能在组件顶层或自定义 Hook 内部调用 React Hook
• 可以接收参数（如初始值、配置项），也可以返回任意值（对象、数组、函数等）

例子：封装一个监听窗口宽度的 Hook

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

在组件中使用：

function MyComponent() {
  const width = useWindowWidth();
  return 当前窗口宽度：{width}px;
}

常见注意事项

• 不要在条件语句或循环中调用自定义 Hook，必须保证每次渲染调用顺序一致
• Hook 名称必须以 use 开头，否则 ESLint 插件无法识别，可能引发 bug
• 自定义 Hook 之间可以互相调用（比如 useFetch 内部调用 useState 和 useEffect）
• 它不创建闭包陷阱——每个组件调用都拥有独立的状态和 effect

典型实用场景

• useInput：封装受控输入框的 value 和 onChange
• useToggle：管理布尔状态及切换函数
• useLocalStorage：同步 state 到 localStorage
• useApi：封装数据请求、加载、错误状态

基本上就这些——它不复杂但容易忽略规则，核心就是“函数 + use 前缀 + 调用内置 Hook + 返回逻辑”。