自定义 Hook 的设计哲学

从「复制粘贴」到「抽象 Hook」

当你第三次写下同样的 useEffect + useState 组合时，就该考虑把它封装成自定义 Hook 了。好的 Hook 就像好的函数：只做一件事，做好一件事。

命名决定一切

自定义 Hook 的名字应该描述「它提供了什么能力」，而非「它内部做了什么」。useWindowSize 比 useResizeEventListener 更直观，useAuth 比 useJWTTokenDecoder 更友好。

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

返回值的设计

返回数组（如 useState）适合需要重命名的场景；返回对象适合字段较多的场景。当返回值超过 3 个时，优先考虑对象。

• 返回 2 个值：用数组，类似 useState
• 返回 3+ 个值：用对象，字段名更清晰
• 同时需要两种场景：返回对象，解构时用别名

依赖项是最大的陷阱

自定义 Hook 内部的 useEffect 依赖项问题会传染给调用方。善用 useCallback、useRef 和 useReducer 来稳定依赖，是写好自定义 Hook 的关键所在。