在 React 开发中，“复用” 是贯穿始终的核心诉求。从类组件的 mixins、高阶组件（HOC），到 Render Props，再到如今的自定义 Hook，React 官方终于给出了最优雅的逻辑复用方案 —— 自定义 Hook。它以函数式的简洁形态，让组件逻辑抽离、复用变得直观且无侵入性。本文将从实战角度，拆解自定义 Hook 的核心思想，并通过 “请求 Hook” 和 “表单 Hook” 两个高频场景，手把手教你封装可复用的业务逻辑。
一、自定义 Hook 的核心认知
1. 什么是自定义 Hook？
自定义 Hook 是以 use 开头的普通函数，它可以调用其他 Hook（如 useState、useEffect、useCallback），将组件中可复用的逻辑抽离出来，返回组件需要的状态或方法。本质上，它是 Hook 的 “组合器”，让逻辑像积木一样可拆解、可复用。
2. 核心规则（必守！）
- 命名必须以
use开头（如 useRequest、useForm），这是 React 识别 Hook 的约定； - 只能在 React 函数组件 / 自定义 Hook 中调用，不能在普通函数、条件语句中调用；
- 每次调用自定义 Hook，都会创建独立的状态闭包，不同组件使用时互不干扰。
3. 为什么选择自定义 Hook？
对比传统复用方案：
- 高阶组件（HOC）：会产生组件嵌套地狱，props 透传易混乱；
- Render Props：代码嵌套层级深，可读性差；
- 自定义 Hook：无额外组件嵌套，逻辑与 UI 解耦，返回值可按需接收，代码更简洁。
二、实战 1：封装通用请求 Hook（useRequest）
数据请求是前端开发的高频场景，加载状态、错误处理、取消请求、重复请求拦截等逻辑几乎每个接口都需要。我们可以封装一个通用的 useRequest，统一处理这些逻辑。
需求分析
- 支持传入请求函数（如 axios/fetch 接口）；
- 提供加载状态（loading）、数据（data）、错误（error）；
- 支持手动触发请求、取消请求；
- 支持请求参数更新自动重新请求；
- 支持重复请求拦截（防止短时间多次触发同一请求）。
代码实现
import { useState, useEffect, useRef, useCallback } from 'react'; /** * 通用请求Hook * @param {Function} requestFn - 请求函数（需返回Promise） * @param {any[]} params - 请求参数（依赖项，参数变化自动重新请求） * @param {Object} options - 配置项 * @param {boolean} options.autoRequest - 是否自动触发请求（默认true） * @param {boolean} options.abortPreRequest - 是否取消前一次未完成的请求（默认true） * @returns {Object} { loading, data, error, run, cancel } */ function useRequest(requestFn, params = [], options = {}) { const { autoRequest = true, abortPreRequest = true } = options; const [loading, setLoading] = useState(false); const [data, setData] = useState(null); const [error, setError] = useState(null); // 存储请求控制器（用于取消请求） const abortControllerRef = useRef(null); // 标记是否是最新请求（防止旧请求覆盖新请求结果） const latestRequestRef = useRef(0); // 取消请求 const cancel = useCallback(() => { if (abortControllerRef.current) { abortControllerRef.current.abort(); abortControllerRef.current = null; } }, []); // 手动触发请求 const run = useCallback(async (manualParams = []) => { // 取消前一次未完成的请求 if (abortPreRequest) { cancel(); } // 生成本次请求唯一标识 const requestId = ++latestRequestRef.current; setLoading(true); setError(null); try { // 创建AbortController（用于取消请求） const controller = new AbortController(); abortControllerRef.current = controller; // 执行请求函数，传入参数和取消信号 const result = await requestFn(...manualParams, { signal: controller.signal }); // 仅保留最新请求的结果 if (requestId === latestRequestRef.current) { setData(result); } } catch (err) { // 排除手动取消的错误 if (err.name !== 'AbortError' && requestId === latestRequestRef.current) { setError(err); console.error('请求失败：', err); } } finally { // 仅更新最新请求的加载状态 if (requestId === latestRequestRef.current) { setLoading(false); abortControllerRef.current = null; } } }, [requestFn, abortPreRequest, cancel]); // 自动请求：依赖参数变化时触发 useEffect(() => { if (autoRequest) { run(params); } // 组件卸载时取消请求 return () => { cancel(); }; }, [autoRequest, run, params, cancel]); return { loading, data, error, run, cancel }; }使用示例
import { useCallback } from 'react'; import axios from 'axios'; import useRequest from './useRequest'; // 定义请求函数 const fetchUser = async (userId, { signal }) => { const res = await axios.get(`/api/user/${userId}`, { signal }); return res.data; }; function UserProfile({ userId }) { // 使用useRequest const { loading, data: user, error, run: refetchUser } = useRequest( fetchUser, [userId], // 依赖userId，变化时自动重新请求 { autoRequest: true } ); if (loading) return <div>加载中...</div>; if (error) return <div>请求失败：{error.message}</div>; return ( <div> <h1>{user.name}</h1> <p>邮箱：{user.email}</p> <button onClick={() => refetchUser([userId])}>刷新信息</button> </div> ); }核心亮点
- 支持 AbortController 取消请求，避免组件卸载后请求仍执行；
- 防止重复请求覆盖：通过 requestId 确保仅保留最新请求结果；
- 灵活的触发方式：自动请求（依赖参数变化）+ 手动触发（run 方法）；
- 错误边界：排除手动取消的错误，避免误报。
三、实战 2：封装通用表单 Hook（useForm）
表单处理是另一个高频场景：值绑定、表单验证、重置、提交状态管理等逻辑重复度极高。封装 useForm 可以让表单组件聚焦 UI，而非逻辑。
需求分析
- 支持表单初始值绑定；
- 提供表单值（formData）和修改方法（setValue）；
- 支持表单验证（自定义验证规则）；
- 提供提交状态（submitting）、提交方法（handleSubmit）；
- 支持表单重置。
代码实现
import { useState, useCallback } from 'react'; /** * 通用表单Hook * @param {Object} initialValues - 表单初始值 * @param {Function} validate - 表单验证函数（返回错误信息对象） * @returns {Object} { formData, errors, submitting, setValue, handleSubmit, resetForm } */ function useForm(initialValues = {}, validate = () => ({})) { // 表单值状态 const [formData, setFormData] = useState(initialValues); // 表单错误信息 const [errors, setErrors] = useState({}); // 提交状态 const [submitting, setSubmitting] = useState(false); // 单个表单字段赋值 const setValue = useCallback((field, value) => { setFormData(prev => ({ ...prev, [field]: value })); // 赋值后清除该字段的错误 setErrors(prev => ({ ...prev, [field]: '' })); }, []); // 表单重置 const resetForm = useCallback(() => { setFormData(initialValues); setErrors({}); setSubmitting(false); }, [initialValues]); // 表单提交 const handleSubmit = useCallback( async (onSubmit) => { // 执行验证 const validateErrors = validate(formData); setErrors(validateErrors); // 存在验证错误则终止提交 const hasError = Object.values(validateErrors).some(err => err); if (hasError) return; setSubmitting(true); try { // 执行自定义提交逻辑 await onSubmit(formData); } catch (err) { console.error('表单提交失败：', err); throw err; } finally { setSubmitting(false); } }, [validate, formData] ); return { formData, errors, submitting, setValue, handleSubmit, resetForm }; }使用示例
import { useCallback } from 'react'; import useForm from './useForm'; function LoginForm() { // 定义验证规则 const validate = useCallback((formData) => { const errors = {}; if (!formData.username) { errors.username = '请输入用户名'; } if (!formData.password) { errors.password = '请输入密码'; } else if (formData.password.length < 6) { errors.password = '密码长度不少于6位'; } return errors; }, []); // 使用useForm const { formData, errors, submitting, setValue, handleSubmit, resetForm } = useForm( { username: '', password: '' }, // 初始值 validate // 验证函数 ); // 提交逻辑 const onLogin = useCallback(async (data) => { // 模拟登录请求 await new Promise(resolve => setTimeout(resolve, 1000)); console.log('登录提交：', data); alert('登录成功！'); }, []); return ( <form onSubmit={(e) => e.preventDefault()}> <div> <label>用户名：</label> <input type="text" value={formData.username} onChange={(e) => setValue('username', e.target.value)} disabled={submitting} /> {errors.username && <span style={{ color: 'red' }}>{errors.username}</span>} </div> <div> <label>密码：</label> <input type="password" value={formData.password} onChange={(e) => setValue('password', e.target.value)} disabled={submitting} /> {errors.password && <span style={{ color: 'red' }}>{errors.password}</span>} </div> <button onClick={() => handleSubmit(onLogin)} disabled={submitting} > {submitting ? '提交中...' : '登录'} </button> <button type="button" onClick={resetForm} disabled={submitting} style={{ marginLeft: 10 }} > 重置 </button> </form> ); }核心亮点
- 灵活的字段赋值：setValue 支持单个字段更新，自动清除该字段错误；
- 可定制验证：支持自定义验证规则，返回错误对象即可；
- 提交状态管理：submitting 状态防止重复提交；
- 完整的重置功能：一键恢复初始值，清空错误。
四、自定义 Hook 封装的最佳实践
- 单一职责：一个 Hook 只处理一类逻辑（如 useRequest 只处理请求，useForm 只处理表单），避免 “大而全” 的 Hook；
- 配置化设计：通过 options 参数提供灵活配置（如 useRequest 的 autoRequest、abortPreRequest）；
- 返回值按需暴露：只返回组件需要的状态 / 方法，避免冗余；
- 处理边界情况：如请求 Hook 的取消请求、表单 Hook 的验证错误拦截；
- 类型提示（TS）：如果使用 TypeScript，为 Hook 添加泛型和类型定义，提升开发体验。
五、总结
自定义 Hook 是 React 函数式编程的精髓，它以极简的方式解决了逻辑复用的痛点。本文通过 useRequest 和 useForm 两个典型场景，展示了自定义 Hook 的封装思路：抽离重复逻辑 → 封装成 use 开头的函数 → 暴露状态 / 方法给组件使用。
在实际开发中，你可以基于这个思路封装更多场景的 Hook，比如 usePagination（分页）、useModal（弹窗）、useLocalStorage（本地存储）等。记住，自定义 Hook 的核心是 “复用”，但不要为了封装而封装 —— 只有当逻辑在多个组件中重复出现时，封装才有意义。
最终，好的自定义 Hook 能让你的组件代码更简洁、逻辑更清晰，大幅提升开发效率和代码可维护性。
：从获取权限到运行成功的终极教程)
)