自定义 hook 是什么，以及如何编写一个？

Question

Accepted Answer

**Custom hook** 是一个名称以 `use` 开头的函数，它调用其他 hook 来**封装和复用有状态逻辑** — 不改变你的组件树（不同于 HOC 或 render props）。 ```jsx // extract "fetch + loading + error" logic once, reuse everywhere function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const ctrl = new AbortController(); setLoading(true); fetch(url, { signal: ctrl.signal }) .then(r => r.json()) .then(setData) .catch(e => { if (e.name !== "AbortError") setError(e); }) .finally(() => setLoading(false)); return () => ctrl.abort(); }, [url]); return { data, loading, error }; } // usage — the component stays declarative: function Profile({ id }) { const { data, loading, error } = useFetch(`/api/users/${id}`); if (loading) return ; return

{data.name}

; } ``` ## 重要属性 - 遵循 **Rules of Hooks**（在顶层调用；仅从组件/hook 调用）。 - **State 在每次调用时是隔离的。** 两个使用 `useFetch` 的组件各自获得独立的 state — 共享 hook *不会*共享数据。 - 约定：命名为 `useX` 并返回 state + 函数（通常是数组或对象）。 ## 为什么这很重要自定义 hook 是在现代 React 中共享逻辑（数据获取、表单、订阅、媒体查询）的惯用方式，使组件保持简洁，且逻辑可独立测试。