react hooks 自定义封装

React Hooks 自定义封装是 React 开发中的重要技巧，它可以帮助我们抽离复用逻辑，让组件代码更加简洁。下面我将介绍自定义 Hooks 的基本概念和几个实用的示例。

自定义 Hooks 的特点

命名必须以 use 开头，这是 React 的约定
可以调用其他 Hooks（内置或自定义）
用于封装可复用的状态逻辑
每次调用自定义 Hook 都会创建独立的状态

实用自定义 Hooks 示例

1. 处理表单的 useForm Hook

这个 Hook 可以简化表单处理逻辑，包括值的管理和表单提交：

表单处理的自定义Hook

创建时间：08:38

使用示例：

jsx

function LoginForm() {const { values, handleChange, handleSubmit } = useForm({ username: '', password: '' },(formData) => {console.log('提交表单:', formData);// 处理登录逻辑});return (<form onSubmit={handleSubmit}><inputname="username"value={values.username}onChange={handleChange}placeholder="用户名"/><inputname="password"type="password"value={values.password}onChange={handleChange}placeholder="密码"/><button type="submit">登录</button></form>);
}

2. 处理本地存储的 useLocalStorage Hook

这个 Hook 可以将状态与 localStorage 同步：

本地存储的自定义Hook

创建时间：08:38

使用示例：

jsx

function ThemeSwitcher() {// 使用自定义Hook，自动与localStorage同步const [theme, setTheme] = useLocalStorage('app-theme', 'light');const toggleTheme = () => {setTheme(prev => prev === 'light' ? 'dark' : 'light');};return (<div className={theme}><p>当前主题: {theme}</p><button onClick={toggleTheme}>切换主题</button></div>);
}

3. 处理 API 请求的 useFetch Hook

这个 Hook 可以简化数据请求逻辑：

API请求的自定义Hook

创建时间：08:38

使用示例：

jsx

function UserList() {const { data: users, loading, error, refetch } = useFetch('https://jsonplaceholder.typicode.com/users');if (loading) return <div>加载中...</div>;if (error) return <div>错误: {error} <button onClick={refetch}>重试</button></div>;return (<div><h2>用户列表</h2><button onClick={refetch}>刷新</button><ul>{users?.map(user => (<li key={user.id}>{user.name}</li>))}</ul></div>);
}