如何写一个自定义 Hook？有哪些最佳实践？

自定义 Hook 是以 use 开头的函数，内部可调用其他 Hook，用于抽取组件间可复用的状态逻辑（而非 UI）。

function useLocalStorage(key, initial) {
  const [val, setVal] = useState(() => localStorage.getItem(key) ?? initial)
  useEffect(() => localStorage.setItem(key, val), [key, val])
  return [val, setVal]
}

最佳实践：

1. 命名必须以 use 开头（让 React 的 Hooks 规则检查器能识别）
2. 只调用其他 Hook，不直接返回 JSX
3. 返回数组（可解构命名）或对象（避免顺序耦合）
4. 把「状态值 + 操作函数」一起返回，像 [value, setValue]

区别于普通函数：Hook 可以"挂"在组件生命周期上（用 useState/useEffect）。

同分类其他题目