Hooks 进阶：自定义 Hook 的设计与实践

引言

React Hooks 已成为现代 React 开发的核心范式，而自定义 Hook 则为我们提供了强大的代码复用机制。

自定义 Hook 的基础原理

自定义 Hook 本质上是一种函数复用机制，它允许我们将组件逻辑提取到可重用的函数中。与传统的高阶组件(HOC)和 render props 模式相比，Hook 提供了更直接的状态共享方式，不会引入额外的组件嵌套。

自定义 Hook 的核心规则

命名必须以 use 开头：这不仅是约定，也使 React 能够识别 Hook 函数
可以调用其他 Hook：自定义 Hook 内部可以调用 React 内置 Hook 或其他自定义 Hook
状态是隔离的：不同组件调用同一个 Hook 不会共享状态

// 基础自定义 Hook 示例
function useCounter(initialValue = 0, step = 1) {const [count, setCount] = useState(initialValue);const increment = useCallback(() => {setCount(prevCount => prevCount + step);}, [step]);const decrement = useCallback(() => {setCount(prevCount => prevCount - step);}, [step]);const reset = useCallback(() => {setCount(initialValue);}, [initialValue]);return { count, increment, decrement, reset };
}// 使用示例
function CounterComponent() {const { count, increment, decrement, reset } = useCounter(10, 2);return (<div><p>当前计数: {count}</p><button onClick={increment}>增加</button><button onClick={decrement}>减少</button><button onClick={reset}>重置</button></div>);
}

自定义 Hook 设计模式

1. 资源管理型 Hook

这类 Hook 负责管理外部资源的生命周期，如网络请求、事件监听等。

function useFetch(url, options = {}) {const [data, setData] = useState(null);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);const optionsRef = useRef(options);useEffect(() => {let isMounted = true;const controller = new AbortController();const signal = controller.signal;const fetchData = async () => {setLoading(true);try {const response = await fetch(url, {...optionsRef.current,signal});if (!response.ok) {throw new Error(`HTTP error! Status: ${response.status}`);}const result = await response.json();if (isMounted) {setData(result);setError(null);}} catch (err) {if (isMounted && err.name !== 'AbortError') {setError(err.message);setData(null);}} finally {if (isMounted) {setLoading(false);}}};fetchData();return () => {isMounted = false;controller.abort();};}, [url]);return { data, loading, error };
}// 使用示例
function UserProfile({ userId }) {const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`);if (loading) return <div>加载中...</div>;if (error) return <div>错误: {error}</div>;return (<div><h2>{user.name}</h2><p>Email: {user.email}</p></div>);
}

2. 状态逻辑型 Hook

封装复杂状态逻辑，提供简洁的状态管理接口。

function useForm(initialValues = {}) {const [values, setValues] = useState(initialValues);const [errors, setErrors] = useState({});const [touched, setTouched] = useState({});const [isSubmitting, setIsSubmitting] = useState(false);const handleChange = useCallback((e) => {const { name, value } = e.target;setValues(prev => ({...prev,[name]: value}));}, []);const handleBlur = useCallback((e) => {const { name } = e.target;setTouched(prev => ({...prev,[name]: true}));}, []);const reset = useCallback(() => {setValues(initialValues);setErrors({});setTouched({});setIsSubmitting(false);}, [initialValues]);return {values,errors,touched,isSubmitting,handleChange,handleBlur,setValues,setErrors,setIsSubmitting,reset};
}// 使用示例
function LoginForm() {const { values, errors, touched, isSubmitting, handleChange, handleBlur, setErrors, setIsSubmitting } = useForm({ email: '', password: '' });const validate = () => {const newErrors = {};if (!values.email) newErrors.email = '邮箱不能为空';if (!values.password) newErrors.password = '密码不能为空';setErrors(newErrors);return Object.keys(newErrors).length === 0;};const handleSubmit = async (e) => {e.preventDefault();if (!validate()) return;setIsSubmitting(true);try {// 登录逻辑await loginUser(values);alert('登录成功');} catch (err) {setErrors({ form: err.message });} finally {setIsSubmitting(false);}};return (<form onSubmit={handleSubmit}><div><label htmlFor="email">邮箱</label><inputid="email"name="email"type="email"value={values.email}onChange={handleChange}onBlur={handleBlur}/>{touched.email && errors.email && <div className="error">{errors.email}</div>}</div><div><label htmlFor="password">密码</label><inputid="password"name="password"type="password"value={values.password}onChange={handleChange}onBlur={handleBlur}/>{touched.password && errors.password && <div className="error">{errors.password}</div>}</div>{errors.form && <div className="error">{errors.form}</div>}<button type="submit" disabled={isSubmitting}>{isSubmitting ? '登录中...' : '登录'}</button></form>);
}

3. 行为型 Hook

封装特定用户交互行为的逻辑，如拖拽、虚拟滚动等。

function useDrag(ref, options = {}) {const {onDragStart,onDrag,onDragEnd,disabled = false} = options;const [isDragging, setIsDragging] = useState(false);const [position, setPosition] = useState({ x: 0, y: 0 });const startPosRef = useRef({ x: 0, y: 0 });const currentPosRef = useRef({ x: 0, y: 0 });useEffect(() => {if (!ref.current || disabled) return;const element = ref.current;const handleMouseDown = (e) => {// 避免与点击事件冲突if (e.button !== 0) return;setIsDragging(true);startPosRef.current = {x: e.clientX - currentPosRef.current.x,y: e.clientY - currentPosRef.current.y};if (onDragStart) {onDragStart({x: currentPosRef.current.x,y: currentPosRef.current.y});}document.addEventListener('mousemove', handleMouseMove);document.addEventListener('mouseup', handleMouseUp);e.preventDefault();};const handleMouseMove = (e) => {if (!isDragging) return;const newPos = {x: e.clientX - startPosRef.current.x,y: e.clientY - startPosRef.current.y};currentPosRef.current = newPos;setPosition(newPos);if (onDrag) {onDrag(newPos);}};const handleMouseUp = () => {setIsDragging(false);document.removeEventListener('mousemove', handleMouseMove);document.removeEventListener('mouseup', handleMouseUp);if (onDragEnd) {onDragEnd({x: currentPosRef.current.x,y: currentPosRef.current.y});}};element.addEventListener('mousedown', handleMouseDown);return () => {element.removeEventListener('mousedown', handleMouseDown);document.removeEventListener('mousemove', handleMouseMove);document.removeEventListener('mouseup', handleMouseUp);};}, [ref, disabled, isDragging, onDragStart, onDrag, onDragEnd]);return { isDragging, position, setPosition };
}// 使用示例
function DraggableBox() {const boxRef = useRef(null);const { isDragging, position } = useDrag(boxRef, {onDragStart: (pos) => console.log('开始拖动', pos),onDragEnd: (pos) => console.log('结束拖动', pos)});return (<divref={boxRef}style={{position: 'absolute',left: `${position.x}px`,top: `${position.y}px`,width: '100px',height: '100px',background: isDragging ? '#5c7cfa' : '#339af0',cursor: 'grab',userSelect: 'none',boxShadow: isDragging ? '0 8px 16px rgba(0,0,0,0.2)' : '0 2px 4px rgba(0,0,0,0.1)',transition: isDragging ? 'none' : 'box-shadow 0.3s, background 0.3s'}}>拖拽我</div>);
}

高级技巧与优化

1. 依赖收集与性能优化

自定义 Hook 的性能优化主要关注两个方面：减少不必要的重渲染和优化内部逻辑执行效率。

function useSearch(initialQuery = '') {const [query, setQuery] = useState(initialQuery);const [results, setResults] = useState([]);const [loading, setLoading] = useState(false);// 使用 useRef 保存最新值，避免 useCallback 和 useEffect 依赖过多const stateRef = useRef({ query });stateRef.current.query = query;// 使用 useCallback 缓存函数引用const search = useCallback(debounce(async () => {const currentQuery = stateRef.current.query;if (!currentQuery.trim()) {setResults([]);return;}setLoading(true);try {const response = await fetch(`https://api.example.com/search?q=${encodeURIComponent(currentQuery)}`);const data = await response.json();setResults(data);} catch (error) {console.error('搜索出错:', error);setResults([]);} finally {setLoading(false);}}, 300), []);// 查询变化时触发搜索useEffect(() => {search();// 返回清理函数，取消正在进行的请求return () => {search.cancel();};}, [query, search]);return {query,setQuery,results,loading};
}// 节流/防抖辅助函数
function debounce(fn, delay) {let timer = null;const debounced = function(...args) {if (timer) clearTimeout(timer);timer = setTimeout(() => {fn.apply(this, args);}, delay);};debounced.cancel = function() {if (timer) {clearTimeout(timer);timer = null;}};return debounced;
}

2. 组合 Hooks 实现复杂功能

通过组合多个基础 Hook 实现更复杂的功能，遵循单一职责原则。

// 基础 Hook: 管理分页状态
function usePagination(initialPage = 1, initialPageSize = 10) {const [page, setPage] = useState(initialPage);const [pageSize, setPageSize] = useState(initialPageSize);const reset = useCallback(() => {setPage(initialPage);setPageSize(initialPageSize);}, [initialPage, initialPageSize]);return {page,pageSize,setPage,setPageSize,reset};
}// 基础 Hook: 管理排序状态
function useSorting(initialSortField = '', initialSortDirection = 'asc') {const [sortField, setSortField] = useState(initialSortField);const [sortDirection, setSortDirection] = useState(initialSortDirection);const toggleSort = useCallback((field) => {if (field === sortField) {setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');} else {setSortField(field);setSortDirection('asc');}}, [sortField]);return {sortField,sortDirection,toggleSort};
}// 组合 Hook: 实现数据表格功能
function useDataTable(fetchFn, initialFilters = {}) {const [filters, setFilters] = useState(initialFilters);const [data, setData] = useState([]);const [total, setTotal] = useState(0);const [loading, setLoading] = useState(false);const [error, setError] = useState(null);// 组合分页 Hookconst pagination = usePagination();// 组合排序 Hookconst sorting = useSorting();// 加载数据的函数const loadData = useCallback(async () => {setLoading(true);setError(null);try {const params = {page: pagination.page,pageSize: pagination.pageSize,sortField: sorting.sortField,sortDirection: sorting.sortDirection,...filters};const result = await fetchFn(params);setData(result.data);setTotal(result.total);} catch (err) {setError(err.message);} finally {setLoading(false);}}, [fetchFn,pagination.page, pagination.pageSize, sorting.sortField, sorting.sortDirection, filters]);// 过滤条件、分页或排序变化时重新加载数据useEffect(() => {loadData();}, [loadData]);// 更新过滤条件的函数const updateFilters = useCallback((newFilters) => {setFilters(prev => ({...prev,...newFilters}));// 重置到第一页pagination.setPage(1);}, [pagination]);// 重置所有状态const reset = useCallback(() => {pagination.reset();setFilters(initialFilters);}, [pagination, initialFilters]);return {// 数据状态data,total,loading,error,// 分页相关page: pagination.page,pageSize: pagination.pageSize,setPage: pagination.setPage,setPageSize: pagination.setPageSize,// 排序相关sortField: sorting.sortField,sortDirection: sorting.sortDirection,toggleSort: sorting.toggleSort,// 过滤相关filters,updateFilters,// 操作方法reload: loadData,reset};
}// 使用示例
function UsersTable() {const fetchUsers = async (params) => {const queryString = new URLSearchParams(params).toString();const response = await fetch(`https://api.example.com/users?${queryString}`);return await response.json();};const {data: users,total,loading,page,pageSize,setPage,setPageSize,sortField,sortDirection,toggleSort,filters,updateFilters} = useDataTable(fetchUsers, { status: 'active' });return (<div><div className="filters"><inputplaceholder="搜索用户"value={filters.keyword || ''}onChange={e => updateFilters({ keyword: e.target.value })}/><selectvalue={filters.status}onChange={e => updateFilters({ status: e.target.value })}><option value="active">活跃</option><option value="inactive">非活跃</option><option value="all">全部</option></select></div>{loading ? (<div>加载中...</div>) : (<table><thead><tr><th onClick={() => toggleSort('name')}>姓名 {sortField === 'name' && (sortDirection === 'asc' ? '↑' : '↓')}</th><th onClick={() => toggleSort('email')}>邮箱 {sortField === 'email' && (sortDirection === 'asc' ? '↑' : '↓')}</th><th onClick={() => toggleSort('lastLogin')}>最近登录 {sortField === 'lastLogin' && (sortDirection === 'asc' ? '↑' : '↓')}</th></tr></thead><tbody>{users.map(user => (<tr key={user.id}><td>{user.name}</td><td>{user.email}</td><td>{new Date(user.lastLogin).toLocaleString()}</td></tr>))}</tbody></table>)}<div className="pagination"><button disabled={page === 1} onClick={() => setPage(page - 1)}>上一页</button><span>第 {page} 页，共 {Math.ceil(total / pageSize)} 页</span><button disabled={page >= Math.ceil(total / pageSize)}onClick={() => setPage(page + 1)}>下一页</button><selectvalue={pageSize}onChange={e => setPageSize(Number(e.target.value))}><option value={10}>10条/页</option><option value={20}>20条/页</option><option value={50}>50条/页</option></select></div></div>);
}

3. 利用 Context 优化 Hook 共享状态

当多个组件需要共享同一个 Hook 的状态时，可以结合 Context API 实现。

// 创建一个主题上下文
const ThemeContext = createContext(null);// 主题 Provider 组件
function ThemeProvider({ children, initialTheme = 'light' }) {const [theme, setTheme] = useState(initialTheme);// 在 localStorage 中保存主题偏好useEffect(() => {localStorage.setItem('theme', theme);}, [theme]);const toggleTheme = useCallback(() => {setTheme(prev => prev === 'light' ? 'dark' : 'light');}, []);// 创建主题值对象const themeValue = useMemo(() => ({theme,setTheme,toggleTheme,isDark: theme === 'dark'}), [theme, toggleTheme]);return (<ThemeContext.Provider value={themeValue}>{children}</ThemeContext.Provider>);
}// 自定义 Hook 用于访问主题上下文
function useTheme() {const context = useContext(ThemeContext);if (context === null) {throw new Error('useTheme 必须在 ThemeProvider 内部使用');}return context;
}// 使用示例
function App() {return (<ThemeProvider initialTheme="light"><MainLayout /></ThemeProvider>);
}function MainLayout() {const { theme, toggleTheme } = useTheme();return (<div className={`app ${theme}`}><header><h1>我的应用</h1><button onClick={toggleTheme}>切换到{theme === 'light' ? '暗色' : '亮色'}主题</button></header><main><Content /></main></div>);
}function Content() {const { isDark } = useTheme();return (<section className="content"><h2>内容区域</h2><p>当前使用的是{isDark ? '暗色' : '亮色'}主题</p></section>);
}

自定义 Hook 与现代前端架构

1. 与状态管理的整合

自定义 Hook 可以与 Redux、Zustand 等状态管理库无缝集成，提供更集中的状态管理方案。

// 集成 Redux 的自定义 Hook
function useReduxActions(slice) {const dispatch = useDispatch();const state = useSelector(state => state[slice]);// 使用 useMemo 缓存创建的 actions 对象const actions = useMemo(() => {// 示例：为一个用户模块创建actionsif (slice === 'users') {return {fetchUsers: (params) => {dispatch({ type: 'users/fetchUsersStart', payload: params });return fetch(`/api/users?${new URLSearchParams(params)}`).then(res => res.json()).then(data => {dispatch({ type: 'users/fetchUsersSuccess', payload: data });return data;}).catch(error => {dispatch({ type: 'users/fetchUsersFailure', payload: error.message });throw error;});},createUser: (userData) => {dispatch({ type: 'users/createUserStart', payload: userData });return fetch('/api/users', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify(userData)}).then(res => res.json()).then(data => {dispatch({ type: 'users/createUserSuccess', payload: data });return data;}).catch(error => {dispatch({ type: 'users/createUserFailure', payload: error.message });throw error;});}};}return {};}, [dispatch, slice]);return { state, ...actions };
}// 使用示例
function UserList() {const { state: usersState, fetchUsers } = useReduxActions('users');const { data, loading, error } = usersState;useEffect(() => {fetchUsers({ page: 1, limit: 10 });}, [fetchUsers]);if (loading) return <div>加载中...</div>;if (error) return <div>错误: {error}</div>;return (<ul>{data.map(user => (<li key={user.id}>{user.name}</li>))}</ul>);
}

2. 与组件库的协同设计

自定义 Hook 可以成为组件库的强大辅助工具，为复杂组件提供逻辑层抽象。

// 自定义 Hook 和组件协同
function useMenuControl(initialOpenKeys = []) {const [openKeys, setOpenKeys] = useState(initialOpenKeys);const [selectedKey, setSelectedKey] = useState(null);const onOpenChange = useCallback((key) => {setOpenKeys(prev => {const keyIndex = prev.indexOf(key);if (keyIndex >= 0) {// 已打开，则关闭const newKeys = [...prev];newKeys.splice(keyIndex, 1);return newKeys;} else {// 未打开，则添加return [...prev, key];}});}, []);const isOpen = useCallback((key) => {return openKeys.includes(key);}, [openKeys]);return {openKeys,selectedKey,setSelectedKey,onOpenChange,isOpen};
}// 菜单组件
function Menu({ items, defaultOpenKeys = [] }) {const {openKeys,selectedKey,setSelectedKey,onOpenChange,isOpen} = useMenuControl(defaultOpenKeys);return (<nav className="menu">{items.map(item => {if (item.children) {return (<div key={item.key} className="submenu"><divclassName="submenu-title"onClick={() => onOpenChange(item.key)}>{item.icon && <span className="icon">{item.icon}</span>}<span>{item.label}</span><span className={`arrow ${isOpen(item.key) ? 'open' : ''}`}>▾</span></div>{isOpen(item.key) && (<div className="submenu-items">{item.children.map(child => (<divkey={child.key}className={`menu-item ${selectedKey === child.key ? 'active' : ''}`}onClick={() => setSelectedKey(child.key)}>{child.icon && <span className="icon">{child.icon}</span>}<span>{child.label}</span></div>))}</div>)}</div>);}return (<divkey={item.key}className={`menu-item ${selectedKey === item.key ? 'active' : ''}`}onClick={() => setSelectedKey(item.key)}>{item.icon && <span className="icon">{item.icon}</span>}<span>{item.label}</span></div>);})}</nav>);
}// 使用示例
function SidebarNavigation() {const menuItems = [{key: 'dashboard',label: '仪表盘',icon: '📊'},{key: 'users',label: '用户管理',icon: '👥',children: [{key: 'user-list',label: '用户列表'},{key: 'user-groups',label: '用户组'}]},{key: 'settings',label: '系统设置',icon: '⚙️',children: [{key: 'profile',label: '个人资料'},{key: 'security',label: '安全设置'}]}];return (<div className="sidebar"><div className="logo">应用名称</div><Menu items={menuItems} defaultOpenKeys={['users']} /></div>);
}

自定义 Hook 测试最佳实践

测试自定义 Hook 是确保其可靠性和可维护性的关键环节。以下是针对自定义 Hook 的测试策略：

// 示例：使用 @testing-library/react-hooks 测试自定义 Hook// useCounter.js
import { useState, useCallback } from 'react';export function useCounter(initialValue = 0, step = 1) {const [count, setCount] = useState(initialValue);const increment = useCallback(() => {setCount(prevCount => prevCount + step);}, [step]);const decrement = useCallback(() => {setCount(prevCount => prevCount - step);}, [step]);const reset = useCallback(() => {setCount(initialValue);}, [initialValue]);return { count, increment, decrement, reset };
}// useCounter.test.js
import { renderHook, act } from '@testing-library/react-hooks';
import { useCounter } from './useCounter';describe('useCounter', () => {test('应该使用默认初始值', () => {const { result } = renderHook(() => useCounter());expect(result.current.count).toBe(0);});test('应该使用提供的初始值', () => {const { result } = renderHook(() => useCounter(10));expect(result.current.count).toBe(10);});test('应该递增计数', () => {const { result } = renderHook(() => useCounter(0, 2));act(() => {result.current.increment();});expect(result.current.count).toBe(2);});test('应该递减计数', () => {const { result } = renderHook(() => useCounter(10, 5));act(() => {result.current.decrement();});expect(result.current.count).toBe(5);});test('应该重置计数', () => {const { result } = renderHook(() => useCounter(10));act(() => {result.current.increment();result.current.reset();});expect(result.current.count).toBe(10);});test('当步长变化时应该更新递增/递减行为', () => {const { result, rerender } = renderHook(({ initialValue, step }) => useCounter(initialValue, step),{ initialProps: { initialValue: 0, step: 1 } });act(() => {result.current.increment();});expect(result.current.count).toBe(1);// 更新 step 参数rerender({ initialValue: 0, step: 3 });act(() => {result.current.increment();});expect(result.current.count).toBe(4); // 1 + 3});
});