1. React自定义Hook的本质与价值在React开发中我们经常遇到需要在多个组件中复用相同逻辑的场景。传统方案是通过高阶组件或render props实现但这些方式往往会让组件树变得臃肿。自定义Hook的出现彻底改变了这种局面它让我们能够在不修改组件结构的情况下复用状态逻辑。自定义Hook本质上是一个JavaScript函数其特殊之处在于函数名必须以use开头React的lint规则强制要求内部可以调用其他Hook能够返回任意值包括不返回任何内容1.1 为什么需要自定义Hook假设我们正在开发一个需要检测网络状态的组件。传统实现方式如下function StatusIndicator() { const [isOnline, setIsOnline] useState(true); useEffect(() { const handleOnline () setIsOnline(true); const handleOffline () setIsOnline(false); window.addEventListener(online, handleOnline); window.addEventListener(offline, handleOffline); return () { window.removeEventListener(online, handleOnline); window.removeEventListener(offline, handleOffline); }; }, []); return div{isOnline ? ✅ Online : ❌ Offline}/div; }当另一个组件也需要同样的网络状态检测时我们不得不复制粘贴这段代码。这不仅违反DRY原则更糟糕的是如果后续需要修改逻辑必须在多个地方同步修改。2. 创建你的第一个自定义Hook2.1 基础实现将上述网络状态检测逻辑提取为自定义Hook// useOnlineStatus.js import { useState, useEffect } from react; export function useOnlineStatus() { const [isOnline, setIsOnline] useState(true); useEffect(() { const handleOnline () setIsOnline(true); const handleOffline () setIsOnline(false); window.addEventListener(online, handleOnline); window.addEventListener(offline, handleOffline); return () { window.removeEventListener(online, handleOnline); window.removeEventListener(offline, handleOffline); }; }, []); return isOnline; }2.2 在组件中使用现在任何组件都可以轻松使用这个Hookfunction SaveButton() { const isOnline useOnlineStatus(); function handleSave() { console.log(Progress saved); } return ( button disabled{!isOnline} onClick{handleSave} {isOnline ? Save : Reconnecting...} /button ); }2.3 状态隔离原则需要特别注意自定义Hook共享的是逻辑而不是状态本身。每个组件调用Hook时都会获得独立的状态副本。这与Vue的composable不同React的设计确保了状态的隔离性。3. 进阶自定义Hook模式3.1 带参数的自定义Hook让我们创建一个更灵活的表单处理Hookexport function useFormInput(initialValue) { const [value, setValue] useState(initialValue); const handleChange (e) { setValue(e.target.value); }; return { value, onChange: handleChange, // 可以返回更多实用方法 reset: () setValue(initialValue), isEmpty: () value.trim() }; }使用示例function UserForm() { const nameProps useFormInput(); const emailProps useFormInput(); const handleSubmit (e) { e.preventDefault(); console.log({ name: nameProps.value, email: emailProps.value }); }; return ( form onSubmit{handleSubmit} input typetext {...nameProps} placeholderName / input typeemail {...emailProps} placeholderEmail / button typesubmitSubmit/button /form ); }3.2 组合多个Hook自定义Hook可以组合其他Hook构建更强大的功能function useUserProfile(userId) { const [user, setUser] useState(null); const [loading, setLoading] useState(true); const [error, setError] useState(null); useEffect(() { const fetchData async () { try { const response await fetch(/api/users/${userId}); const data await response.json(); setUser(data); } catch (err) { setError(err); } finally { setLoading(false); } }; fetchData(); }, [userId]); return { user, loading, error }; }4. 性能优化技巧4.1 避免不必要的重新渲染当自定义Hook返回对象或数组时使用useMemo优化function useAuth() { const [user, setUser] useState(null); const value useMemo(() ({ user, login: (credentials) { /*...*/ }, logout: () { /*...*/ } }), [user]); return value; }4.2 使用useCallback稳定函数引用function useCounter(initialValue 0) { const [count, setCount] useState(initialValue); const increment useCallback(() setCount(c c 1), []); const decrement useCallback(() setCount(c c - 1), []); const reset useCallback(() setCount(initialValue), [initialValue]); return { count, increment, decrement, reset }; }4.3 使用useReducer处理复杂状态对于复杂状态逻辑useReducer往往比useState更合适function useUndoState(initialValue) { const [state, dispatch] useReducer(undoReducer, { past: [], present: initialValue, future: [] }); const canUndo state.past.length 0; const canRedo state.future.length 0; const setState (newValue) { dispatch({ type: SET, payload: newValue }); }; const undo () dispatch({ type: UNDO }); const redo () dispatch({ type: REDO }); return [state.present, setState, { undo, redo, canUndo, canRedo }]; }5. 实战案例useFetch Hook让我们实现一个强大的数据获取Hookimport { useState, useEffect, useCallback } from react; export function useFetch(url, options {}) { const [data, setData] useState(null); const [loading, setLoading] useState(false); const [error, setError] useState(null); const fetchData useCallback(async () { setLoading(true); try { const response await fetch(url, options); if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } const json await response.json(); setData(json); setError(null); } catch (err) { setError(err); } finally { setLoading(false); } }, [url, options]); useEffect(() { if (url) { fetchData(); } }, [url, fetchData]); return { data, loading, error, refetch: fetchData }; }使用示例function UserProfile({ userId }) { const { data: user, loading, error } useFetch(/api/users/${userId}); if (loading) return divLoading.../div; if (error) return divError: {error.message}/div; return ( div h2{user.name}/h2 pEmail: {user.email}/p /div ); }6. 测试自定义Hook测试自定义Hook需要使用testing-library/react-hooksimport { renderHook, act } from testing-library/react-hooks; import { useCounter } from ./useCounter; test(should increment counter, () { const { result } renderHook(() useCounter()); act(() { result.current.increment(); }); expect(result.current.count).toBe(1); });7. 常见问题与解决方案7.1 Hook调用顺序问题自定义Hook必须无条件调用其他Hook不能在条件语句或循环中使用// ❌ 错误示例 function useBadHook(shouldFetch) { if (shouldFetch) { const [data, setData] useState(null); // 违反Hook规则 // ... } // ... } // ✅ 正确做法 function useGoodHook(shouldFetch) { const [data, setData] useState(null); useEffect(() { if (shouldFetch) { // 获取数据逻辑 } }, [shouldFetch]); // ... }7.2 依赖项处理正确处理依赖项数组是避免无限循环的关键function useDebounce(value, delay) { const [debouncedValue, setDebouncedValue] useState(value); useEffect(() { const handler setTimeout(() { setDebouncedValue(value); }, delay); return () { clearTimeout(handler); }; }, [value, delay]); // 只有当value或delay变化时才重新执行 return debouncedValue; }7.3 内存泄漏处理在自定义Hook中清理副作用至关重要function useWindowSize() { const [size, setSize] useState({ width: window.innerWidth, height: window.innerHeight }); useEffect(() { const handleResize () { setSize({ width: window.innerWidth, height: window.innerHeight }); }; window.addEventListener(resize, handleResize); return () { window.removeEventListener(resize, handleResize); }; }, []); return size; }8. 高级模式Hook组合与抽象8.1 组合多个Hook创建复杂逻辑function useAuth() { const [user, setUser] useState(null); const { loading, error, execute } useAsync(); const login useCallback(async (credentials) { const result await execute(loginApi(credentials)); if (!result.error) { setUser(result.data); } }, [execute]); const logout useCallback(() { setUser(null); }, []); return { user, loading, error, login, logout }; }8.2 使用Context增强Hookconst ThemeContext createContext(); export function ThemeProvider({ children }) { const [theme, setTheme] useState(light); const toggleTheme useCallback(() { setTheme(prev prev light ? dark : light); }, []); const value useMemo(() ({ theme, toggleTheme }), [theme, toggleTheme]); return ( ThemeContext.Provider value{value} {children} /ThemeContext.Provider ); } export function useTheme() { const context useContext(ThemeContext); if (!context) { throw new Error(useTheme must be used within a ThemeProvider); } return context; }9. 自定义Hook的最佳实践命名规范始终以use开头采用驼峰命名法如useOnlineStatus单一职责每个Hook应该只关注一个特定功能文档注释为Hook添加清晰的JSDoc注释说明用法/** * 自定义Hook用于获取和操作本地存储数据 * param {string} key 存储键名 * param {any} initialValue 初始值 * returns {[any, function, function]} [存储值, 设置值函数, 移除值函数] */ function useLocalStorage(key, initialValue) { // 实现代码... }类型安全使用TypeScript为Hook添加类型定义interface UseFetchResultT { data: T | null; loading: boolean; error: Error | null; refetch: () Promisevoid; } function useFetchT(url: string): UseFetchResultT { // 实现代码... }性能考量避免在Hook内部进行不必要的计算使用useMemo和useCallback优化10. 从社区中学习优秀HookReact社区有许多优秀的自定义Hook库值得学习react-use包含大量实用Hookahooks阿里巴巴出品的Hook库usehooks-tsTypeScript版本的常用Hook集合分析这些成熟Hook的实现可以帮助我们写出更好的自定义Hook。例如下面是react-use中usePrevious Hook的精妙实现import { useRef, useEffect } from react; export function usePreviousT(value: T): T | undefined { const ref useRefT(); useEffect(() { ref.current value; }, [value]); return ref.current; }这个Hook通过useRef在每次渲染后更新值的特性巧妙地实现了获取上一次值的功能。
1. React自定义Hook的本质与价值在React开发中我们经常遇到需要在多个组件中复用相同逻辑的场景。传统方案是通过高阶组件或render props实现但这些方式往往会让组件树变得臃肿。自定义Hook的出现彻底改变了这种局面它让我们能够在不修改组件结构的情况下复用状态逻辑。自定义Hook本质上是一个JavaScript函数其特殊之处在于函数名必须以use开头React的lint规则强制要求内部可以调用其他Hook能够返回任意值包括不返回任何内容1.1 为什么需要自定义Hook假设我们正在开发一个需要检测网络状态的组件。传统实现方式如下function StatusIndicator() { const [isOnline, setIsOnline] useState(true); useEffect(() { const handleOnline () setIsOnline(true); const handleOffline () setIsOnline(false); window.addEventListener(online, handleOnline); window.addEventListener(offline, handleOffline); return () { window.removeEventListener(online, handleOnline); window.removeEventListener(offline, handleOffline); }; }, []); return div{isOnline ? ✅ Online : ❌ Offline}/div; }当另一个组件也需要同样的网络状态检测时我们不得不复制粘贴这段代码。这不仅违反DRY原则更糟糕的是如果后续需要修改逻辑必须在多个地方同步修改。2. 创建你的第一个自定义Hook2.1 基础实现将上述网络状态检测逻辑提取为自定义Hook// useOnlineStatus.js import { useState, useEffect } from react; export function useOnlineStatus() { const [isOnline, setIsOnline] useState(true); useEffect(() { const handleOnline () setIsOnline(true); const handleOffline () setIsOnline(false); window.addEventListener(online, handleOnline); window.addEventListener(offline, handleOffline); return () { window.removeEventListener(online, handleOnline); window.removeEventListener(offline, handleOffline); }; }, []); return isOnline; }2.2 在组件中使用现在任何组件都可以轻松使用这个Hookfunction SaveButton() { const isOnline useOnlineStatus(); function handleSave() { console.log(Progress saved); } return ( button disabled{!isOnline} onClick{handleSave} {isOnline ? Save : Reconnecting...} /button ); }2.3 状态隔离原则需要特别注意自定义Hook共享的是逻辑而不是状态本身。每个组件调用Hook时都会获得独立的状态副本。这与Vue的composable不同React的设计确保了状态的隔离性。3. 进阶自定义Hook模式3.1 带参数的自定义Hook让我们创建一个更灵活的表单处理Hookexport function useFormInput(initialValue) { const [value, setValue] useState(initialValue); const handleChange (e) { setValue(e.target.value); }; return { value, onChange: handleChange, // 可以返回更多实用方法 reset: () setValue(initialValue), isEmpty: () value.trim() }; }使用示例function UserForm() { const nameProps useFormInput(); const emailProps useFormInput(); const handleSubmit (e) { e.preventDefault(); console.log({ name: nameProps.value, email: emailProps.value }); }; return ( form onSubmit{handleSubmit} input typetext {...nameProps} placeholderName / input typeemail {...emailProps} placeholderEmail / button typesubmitSubmit/button /form ); }3.2 组合多个Hook自定义Hook可以组合其他Hook构建更强大的功能function useUserProfile(userId) { const [user, setUser] useState(null); const [loading, setLoading] useState(true); const [error, setError] useState(null); useEffect(() { const fetchData async () { try { const response await fetch(/api/users/${userId}); const data await response.json(); setUser(data); } catch (err) { setError(err); } finally { setLoading(false); } }; fetchData(); }, [userId]); return { user, loading, error }; }4. 性能优化技巧4.1 避免不必要的重新渲染当自定义Hook返回对象或数组时使用useMemo优化function useAuth() { const [user, setUser] useState(null); const value useMemo(() ({ user, login: (credentials) { /*...*/ }, logout: () { /*...*/ } }), [user]); return value; }4.2 使用useCallback稳定函数引用function useCounter(initialValue 0) { const [count, setCount] useState(initialValue); const increment useCallback(() setCount(c c 1), []); const decrement useCallback(() setCount(c c - 1), []); const reset useCallback(() setCount(initialValue), [initialValue]); return { count, increment, decrement, reset }; }4.3 使用useReducer处理复杂状态对于复杂状态逻辑useReducer往往比useState更合适function useUndoState(initialValue) { const [state, dispatch] useReducer(undoReducer, { past: [], present: initialValue, future: [] }); const canUndo state.past.length 0; const canRedo state.future.length 0; const setState (newValue) { dispatch({ type: SET, payload: newValue }); }; const undo () dispatch({ type: UNDO }); const redo () dispatch({ type: REDO }); return [state.present, setState, { undo, redo, canUndo, canRedo }]; }5. 实战案例useFetch Hook让我们实现一个强大的数据获取Hookimport { useState, useEffect, useCallback } from react; export function useFetch(url, options {}) { const [data, setData] useState(null); const [loading, setLoading] useState(false); const [error, setError] useState(null); const fetchData useCallback(async () { setLoading(true); try { const response await fetch(url, options); if (!response.ok) { throw new Error(HTTP error! status: ${response.status}); } const json await response.json(); setData(json); setError(null); } catch (err) { setError(err); } finally { setLoading(false); } }, [url, options]); useEffect(() { if (url) { fetchData(); } }, [url, fetchData]); return { data, loading, error, refetch: fetchData }; }使用示例function UserProfile({ userId }) { const { data: user, loading, error } useFetch(/api/users/${userId}); if (loading) return divLoading.../div; if (error) return divError: {error.message}/div; return ( div h2{user.name}/h2 pEmail: {user.email}/p /div ); }6. 测试自定义Hook测试自定义Hook需要使用testing-library/react-hooksimport { renderHook, act } from testing-library/react-hooks; import { useCounter } from ./useCounter; test(should increment counter, () { const { result } renderHook(() useCounter()); act(() { result.current.increment(); }); expect(result.current.count).toBe(1); });7. 常见问题与解决方案7.1 Hook调用顺序问题自定义Hook必须无条件调用其他Hook不能在条件语句或循环中使用// ❌ 错误示例 function useBadHook(shouldFetch) { if (shouldFetch) { const [data, setData] useState(null); // 违反Hook规则 // ... } // ... } // ✅ 正确做法 function useGoodHook(shouldFetch) { const [data, setData] useState(null); useEffect(() { if (shouldFetch) { // 获取数据逻辑 } }, [shouldFetch]); // ... }7.2 依赖项处理正确处理依赖项数组是避免无限循环的关键function useDebounce(value, delay) { const [debouncedValue, setDebouncedValue] useState(value); useEffect(() { const handler setTimeout(() { setDebouncedValue(value); }, delay); return () { clearTimeout(handler); }; }, [value, delay]); // 只有当value或delay变化时才重新执行 return debouncedValue; }7.3 内存泄漏处理在自定义Hook中清理副作用至关重要function useWindowSize() { const [size, setSize] useState({ width: window.innerWidth, height: window.innerHeight }); useEffect(() { const handleResize () { setSize({ width: window.innerWidth, height: window.innerHeight }); }; window.addEventListener(resize, handleResize); return () { window.removeEventListener(resize, handleResize); }; }, []); return size; }8. 高级模式Hook组合与抽象8.1 组合多个Hook创建复杂逻辑function useAuth() { const [user, setUser] useState(null); const { loading, error, execute } useAsync(); const login useCallback(async (credentials) { const result await execute(loginApi(credentials)); if (!result.error) { setUser(result.data); } }, [execute]); const logout useCallback(() { setUser(null); }, []); return { user, loading, error, login, logout }; }8.2 使用Context增强Hookconst ThemeContext createContext(); export function ThemeProvider({ children }) { const [theme, setTheme] useState(light); const toggleTheme useCallback(() { setTheme(prev prev light ? dark : light); }, []); const value useMemo(() ({ theme, toggleTheme }), [theme, toggleTheme]); return ( ThemeContext.Provider value{value} {children} /ThemeContext.Provider ); } export function useTheme() { const context useContext(ThemeContext); if (!context) { throw new Error(useTheme must be used within a ThemeProvider); } return context; }9. 自定义Hook的最佳实践命名规范始终以use开头采用驼峰命名法如useOnlineStatus单一职责每个Hook应该只关注一个特定功能文档注释为Hook添加清晰的JSDoc注释说明用法/** * 自定义Hook用于获取和操作本地存储数据 * param {string} key 存储键名 * param {any} initialValue 初始值 * returns {[any, function, function]} [存储值, 设置值函数, 移除值函数] */ function useLocalStorage(key, initialValue) { // 实现代码... }类型安全使用TypeScript为Hook添加类型定义interface UseFetchResultT { data: T | null; loading: boolean; error: Error | null; refetch: () Promisevoid; } function useFetchT(url: string): UseFetchResultT { // 实现代码... }性能考量避免在Hook内部进行不必要的计算使用useMemo和useCallback优化10. 从社区中学习优秀HookReact社区有许多优秀的自定义Hook库值得学习react-use包含大量实用Hookahooks阿里巴巴出品的Hook库usehooks-tsTypeScript版本的常用Hook集合分析这些成熟Hook的实现可以帮助我们写出更好的自定义Hook。例如下面是react-use中usePrevious Hook的精妙实现import { useRef, useEffect } from react; export function usePreviousT(value: T): T | undefined { const ref useRefT(); useEffect(() { ref.current value; }, [value]); return ref.current; }这个Hook通过useRef在每次渲染后更新值的特性巧妙地实现了获取上一次值的功能。
)
)
