React 如何封装自定义 Hook？

Question

React 如何封装自定义 Hook？

仓乃文 · Accepted Answer

自定义 Hook 是将组件逻辑提取为可复用函数的机制，本质是以 use 开头的函数，内部可以使用其他 hooks。基础示例 - 封装数据请求： ```javascript function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { setLoading(true); fetch(url) .then(res => res.json()) .then(setData) .catch(setError) .finally(() => setLoading(false)); }, [url]); return { data, loading, error }; } // 使用 function UserProfile({ userId }) { const { data, loading, error } = useFetch(`/api/users/${userId}`); if (loading) return ; if (error) return ; return

{data.name}

; } ``` 更完整的异步 Hook： ```javascript function useAsync(asyncFn, immediate = true) { const [data, setData] = useState(null); const [loading, setLoading] = useState(immediate); const [error, setError] = useState(null); const execute = useCallback(async (...args) => { setLoading(true); setError(null); try { const result = await asyncFn(...args); setData(result); return result; } catch (e) { setError(e); throw e; } finally { setLoading(false); } }, [asyncFn]); useEffect(() => { if (immediate) execute(); }, [execute, immediate]); return { data, loading, error, execute }; } ``` 补充说明： - 自定义 Hook 必须以 use 开头，这是 React 的约定 - Hook 之间可以互相调用，形成 Hook 组合 - 每次使用自定义 Hook 都会创建独立的 state - 自定义 Hook 可以返回任何值，不只是对象