前端Wiki/词条/自定义 Hook

自定义 Hook

定义把组件间复用的有状态逻辑抽成以 use 开头的普通函数

函数组件没有实例与混入机制，逻辑复用全靠自定义 Hook。约定以 use 开头的函数，内部调用其他 hooks，把状态与操作返回给调用方。它不是 API，只是一种代码组织方式：useFetch、useDebounce、useLocalStorage 这类轮子每天都在救场，且天然没有 Provider 嵌套地狱问题。

写好自定义 Hook 有两条底线：每次渲染必须以相同顺序调用 hooks（遵守规则即可），返回值设计要稳定——返回函数优先用 useCallback 包裹，否则调用方配合 memo 优化时会失效。命名一定用 use 开头，否则 eslint 插件无法帮你做规则校验。

命名必须以 use 开头，否则无法被 lint 规则识别
自定义 Hook 内可以任意调用其他 hooks，逻辑复用零嵌套
返回给调用方的函数记得 useCallback，避免破坏调用方性能优化

JavaScript

import { useState, useEffect } from 'react';

function useOnline() {                      // 自定义 Hook：监听网络状态
  const [online, setOnline] = useState(navigator.onLine);
  useEffect(() => {
    const on = () => setOnline(true);
    const off = () => setOnline(false);
    window.addEventListener('online', on);
    window.addEventListener('offline', off);
    return () => {
      window.removeEventListener('online', on);
      window.removeEventListener('offline', off);
    };
  }, []);
  return online;
}

function StatusBar() {
  const online = useOnline();
  return <p>{online ? '网络正常' : '已断网，请检查连接'}</p>;
}

⚠ 常见误区

给自定义 Hook 起了非 use 开头的名字，lint 校验失效
Hook 里把调用顺序写成条件分支，破坏 hooks 规则
把无逻辑的纯函数也包成 Hook，制造没有复用价值的抽象

🔗 相关词条自定义 Hook 清理函数与请求竞态