告别重复代码：umi框架中React Hooks的5个实用复用技巧
【免费下载链接】umi A framework in react community ✨ 
项目地址: https://gitcode.com/gh_mirrors/umi8/umi
你是否还在为React组件间共享逻辑而编写大量重复代码？是否在Class组件与函数组件间切换时感到混乱？本文将通过umi框架的实际应用场景，展示如何利用React Hooks彻底解决这些问题，让你的组件逻辑复用变得前所未有的简单。读完本文，你将掌握5个实用技巧，包括自定义Hook封装、状态管理优化、生命周期替代方案等，让你的React项目代码更简洁、维护更轻松。
为什么选择React Hooks
React Hooks（钩子）是React 16.8引入的新特性，它允许你在不编写Class组件的情况下使用状态(state)和其他React特性。在umi框架中使用React Hooks有以下显著优势：
- 简化代码结构：将组件逻辑分解为更小的函数，替代复杂的Class组件生命周期方法
- 提升复用性：通过自定义Hook轻松共享组件间的逻辑，无需高阶组件或Render Props
- 优化性能：使用useCallback、useMemo等钩子减少不必要的渲染
- 更好的类型支持：与TypeScript结合提供更清晰的类型定义
umi框架对React Hooks提供了原生支持，你可以直接在页面组件和自定义组件中使用所有React内置Hook，如useState、useEffect、useContext等。官方文档中详细介绍了项目的基础结构，可参考docs/guide/app-structure.md了解如何组织你的umi项目文件。
准备工作：搭建umi开发环境
在开始使用React Hooks前，需要确保你的umi开发环境已正确配置。如果是首次使用umi，可以按照以下步骤快速搭建：
- 安装umi（使用yarn或npm）：
# 使用yarn安装
yarn global add umi
# 或使用npm安装
npm install -g umi
- 验证安装是否成功：
umi -v
# 应显示类似 umi@1.0.0 的版本信息
- 创建新的umi项目：
mkdir umi-hooks-demo
cd umi-hooks-demo
- 创建第一个页面组件，在pages目录下创建index.js文件：
mkdir pages
echo 'import { useState } from "react"; export default () => { const [count, setCount] = useState(0); return <div>计数器: {count} <button onClick={() => setCount(count + 1)}>+1</button></div>; }' > pages/index.js
- 启动开发服务器：
umi dev
在浏览器中访问http://localhost:8000，你将看到一个简单的计数器页面，这表明你的umi项目已成功运行。这个例子已经使用了useState Hook来管理计数器状态，展示了React Hooks最基本的用法。详细的umi入门指南可参考docs/guide/getting-started.md。
技巧一：自定义Hook抽取共享逻辑
自定义Hook是复用组件逻辑的最佳方式，它本质上是一个函数，名称以"use"开头，可以调用其他Hook。在umi项目中，推荐将自定义Hook统一放在src/hooks目录下管理。
示例：创建一个useLocalStorage Hook
这个Hook用于在localStorage中存储和获取状态，实现页面刷新后数据不丢失：
// src/hooks/useLocalStorage.js
import { useState, useEffect } from 'react';
function useLocalStorage(key, initialValue) {
// 从localStorage读取初始值
const [value, setValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.error('Failed to read from localStorage:', error);
return initialValue;
}
});
// 当value变化时保存到localStorage
useEffect(() => {
try {
window.localStorage.setItem(key, JSON.stringify(value));
} catch (error) {
console.error('Failed to write to localStorage:', error);
}
}, [key, value]);
return [value, setValue];
}
export default useLocalStorage;
在页面中使用自定义Hook
// pages/settings.js
import useLocalStorage from '../hooks/useLocalStorage';
export default function Settings() {
// 使用自定义Hook管理用户偏好设置
const [theme, setTheme] = useLocalStorage('theme', 'light');
const [notifications, setNotifications] = useLocalStorage('notifications', true);
return (
<div>
<h1>设置页面</h1>
<div>
<label>
<input
type="checkbox"
checked={notifications}
onChange={(e) => setNotifications(e.target.checked)}
/>
启用通知
</label>
</div>
<div>
<label>主题:</label>
<select value={theme} onChange={(e) => setTheme(e.target.value)}>
<option value="light">浅色</option>
<option value="dark">深色</option>
</select>
</div>
</div>
);
}
通过这种方式，任何需要使用localStorage存储状态的组件都可以简单地引入useLocalStorage Hook，避免了重复编写localStorage操作代码。这种模式可以应用于各种场景，如表单处理、数据获取、定时器管理等。
技巧二：使用useContext优化状态共享
在大型应用中，组件间共享状态是一个常见需求。React的Context API配合useContext Hook可以优雅地解决这个问题，避免了"prop drilling"（属性传递链过长）的问题。
示例：创建全局主题Context
- 首先创建一个主题Context：
// src/contexts/ThemeContext.js
import { createContext, useContext, useState } from 'react';
// 创建Context
const ThemeContext = createContext();
// 创建Provider组件
export function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
// 切换主题的方法
const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};
// 提供给子组件的值
const value = {
theme,
toggleTheme
};
return (
<ThemeContext.Provider value={value}>
{children}
</ThemeContext.Provider>
);
}
// 自定义Hook简化useContext调用
export function useTheme() {
return useContext(ThemeContext);
}
- 在umi应用中注册Provider：
umi应用的根组件可以在src/app.js中定义，这里是设置全局Context的最佳位置：
// src/app.js
import { ThemeProvider } from './contexts/ThemeContext';
export function rootContainer(container) {
return <ThemeProvider>{container}</ThemeProvider>;
}
- 在页面组件中使用主题Context：
// pages/profile.js
import { useTheme } from '../contexts/ThemeContext';
export default function Profile() {
const { theme, toggleTheme } = useTheme();
return (
<div style={{
background: theme === 'light' ? '#fff' : '#333',
color: theme === 'light' ? '#333' : '#fff',
minHeight: '100vh',
padding: '20px'
}}>
<h1>个人资料页面</h1>
<p>当前主题: {theme}</p>
<button onClick={toggleTheme}>切换主题</button>
</div>
);
}
通过这种方式，应用中的任何组件都可以通过useTheme Hook轻松访问和修改全局主题状态，无需通过props层层传递。在umi框架中，你还可以结合dva状态管理来处理更复杂的全局状态，具体可参考docs/guide/with-dva.md。
技巧三：用useEffect替代生命周期方法
useEffect Hook可以替代Class组件中的componentDidMount、componentDidUpdate和componentWillUnmount三个生命周期方法，让副作用处理（如数据获取、订阅、手动修改DOM等）变得更简洁。
常见的useEffect使用场景
- 组件挂载时执行（替代componentDidMount）：
// 页面加载时获取用户信息
useEffect(() => {
console.log('组件已挂载');
fetchUserInfo();
// 不需要清理函数
}, []); // 空依赖数组表示只在挂载和卸载时执行
- 依赖变化时执行（替代componentDidUpdate）：
// 当userId变化时重新获取用户信息
useEffect(() => {
console.log(`userId变化为: ${userId}`);
fetchUserInfo(userId);
// 清理函数，在下一次userId变化或组件卸载时执行
return () => {
console.log(`取消获取userId: ${userId}的信息`);
cancelFetch();
};
}, [userId]); // 依赖数组包含userId，当userId变化时执行
- 组件卸载时清理（替代componentWillUnmount）：
// 订阅事件
useEffect(() => {
const handleScroll = () => console.log('滚动了');
window.addEventListener('scroll', handleScroll);
// 清理函数，在组件卸载时执行
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []); // 空依赖数组表示只在挂载时订阅，卸载时取消订阅
示例：数据加载组件
下面是一个使用useEffect获取远程数据的完整示例：
// pages/user-list.js
import { useState, useEffect } from 'react';
export default function UserList() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// 定义数据获取函数
const fetchUsers = async () => {
try {
setLoading(true);
const response = await fetch('https://api.example.com/users');
if (!response.ok) throw new Error('网络请求失败');
const data = await response.json();
setUsers(data);
setError(null);
} catch (err) {
setError(err.message);
setUsers([]);
} finally {
setLoading(false);
}
};
// 执行数据获取
fetchUsers();
// 清理函数（如果需要）
return () => {
// 可以在这里取消请求或清理资源
};
}, []); // 空依赖数组，只在组件挂载时执行一次
if (loading) return <div>加载中...</div>;
if (error) return <div>出错了: {error}</div>;
return (
<div>
<h1>用户列表</h1>
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
这个例子展示了如何使用useState管理加载状态、数据和错误信息，以及如何使用useEffect在组件挂载时获取数据。在实际项目中，你可能还需要添加取消请求的逻辑，避免组件卸载后仍执行状态更新。
技巧四：使用useCallback和useMemo优化性能
React组件默认在父组件重新渲染时也会重新渲染，即使它的props没有变化。在umi应用中，可以使用useCallback和useMemo Hook来优化性能，减少不必要的渲染。
useCallback：缓存函数引用
useCallback用于缓存函数引用，避免因函数重新创建导致子组件不必要的渲染：
import { useCallback, useState } from 'react';
import UserCard from '../components/UserCard';
export default function UserList() {
const [users, setUsers] = useState([]);
// 缓存handleDelete函数
const handleDelete = useCallback((userId) => {
setUsers(users.filter(user => user.id !== userId));
}, [users]); // 只有当users变化时才重新创建函数
return (
<div>
{users.map(user => (
<UserCard
key={user.id}
user={user}
onDelete={handleDelete}
/>
))}
</div>
);
}
useMemo：缓存计算结果
useMemo用于缓存计算结果，避免每次渲染都执行昂贵的计算：
import { useMemo, useState } from 'react';
export default function OrderSummary() {
const [items, setItems] = useState([]);
// 缓存总价计算结果
const totalPrice = useMemo(() => {
console.log('计算总价...');
return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
}, [items]); // 只有当items变化时才重新计算
return (
<div>
<h1>订单摘要</h1>
<p>总价: ¥{totalPrice.toFixed(2)}</p>
{/* 订单商品列表 */}
</div>
);
}
使用记忆化的注意事项
- 不要过度使用：记忆化本身也有性能开销，只对昂贵的计算或频繁渲染的组件使用
- 依赖数组要完整：确保依赖数组包含所有在回调中使用的外部变量
- 避免记忆化引用类型：如果依赖是对象或数组，即使内容没变，引用变化也会触发重新计算
在umi框架中，还可以通过配置umi-plugin-dva插件来进一步优化性能，该插件内置了dva-loading，可以自动管理加载状态，减少手动编写loading状态的重复代码。
技巧五：结合dva使用useReducer管理复杂状态
对于复杂组件的状态管理，useReducer Hook提供了更结构化的方式来处理状态更新逻辑，特别适合状态逻辑复杂或有多个子值的情况。在umi项目中，可以配合umi-plugin-dva插件使用，进一步简化状态管理。
useReducer基础用法
import { useReducer } from 'react';
// 定义reducer函数
function todoReducer(state, action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, { id: Date.now(), text: action.text, done: false }];
case 'TOGGLE_TODO':
return state.map(todo =>
todo.id === action.id ? { ...todo, done: !todo.done } : todo
);
case 'DELETE_TODO':
return state.filter(todo => todo.id !== action.id);
default:
return state;
}
}
// 在组件中使用
function TodoApp() {
const [todos, dispatch] = useReducer(todoReducer, []);
const [text, setText] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (!text.trim()) return;
dispatch({ type: 'ADD_TODO', text });
setText('');
};
return (
<div>
<form onSubmit={handleSubmit}>
<input value={text} onChange={e => setText(e.target.value)} />
<button type="submit">添加</button>
</form>
<ul>
{todos.map(todo => (
<li
key={todo.id}
style={{ textDecoration: todo.done ? 'line-through' : 'none' }}
onClick={() => dispatch({ type: 'TOGGLE_TODO', id: todo.id })}
>
{todo.text}
<button onClick={() => dispatch({ type: 'DELETE_TODO', id: todo.id })}>
删除
</button>
</li>
))}
</ul>
</div>
);
}
在umi中使用dva状态管理
对于跨组件的状态共享，umi推荐使用dva状态管理。通过umi-plugin-dva插件，你可以在umi项目中轻松使用dva，同时结合React Hooks简化组件代码。
- 首先安装并配置dva插件：
yarn add umi-plugin-dva
- 在.umirc.js中配置插件：
// .umirc.js
export default {
plugins: [
['umi-plugin-dva', { immer: true }], // 启用immer简化reducer编写
],
};
- 创建dva model：
// src/models/cart.js
export default {
namespace: 'cart', // 唯一命名空间
state: {
items: [],
total: 0,
},
reducers: {
addItem(state, { payload }) {
// 由于启用了immer，可以直接修改state
state.items.push(payload);
state.total = state.items.reduce((sum, item) => sum + item.price, 0);
},
removeItem(state, { payload }) {
const index = state.items.findIndex(item => item.id === payload);
if (index !== -1) {
state.items.splice(index, 1);
state.total = state.items.reduce((sum, item) => sum + item.price, 0);
}
},
},
effects: {
// 异步操作
*fetchCart({ payload }, { call, put }) {
const response = yield call(fetchCartData, payload);
yield put({ type: 'setCart', payload: response.data });
},
},
};
- 在组件中使用useSelector和useDispatch Hook访问dva状态：
// pages/cart.js
import { useSelector, useDispatch } from 'dva';
export default function Cart() {
// 使用useSelector获取状态
const { items, total } = useSelector(state => state.cart);
const dispatch = useDispatch();
return (
<div>
<h1>购物车</h1>
<ul>
{items.map(item => (
<li key={item.id}>
{item.name} - ¥{item.price}
<button onClick={() => dispatch({ type: 'cart/removeItem', payload: item.id })}>
删除
</button>
</li>
))}
</ul>
<p>总计: ¥{total}</p>
<button onClick={() => dispatch({
type: 'cart/addItem',
payload: { id: Date.now(), name: '新商品', price: 99 }
})}>
添加商品
</button>
</div>
);
}
通过这种方式，你可以使用dva管理全局状态，同时在组件中使用React Hooks简化代码，避免编写class组件或使用connect高阶组件。详细的dva使用指南可参考docs/guide/with-dva.md。
总结与最佳实践
React Hooks为umi框架中的组件开发带来了革命性的变化，通过本文介绍的5个技巧，你可以显著提升组件逻辑的复用性和代码质量。以下是一些关键的最佳实践总结：
自定义Hook最佳实践
- 命名以"use"开头，确保遵循React Hooks规则
- 一个自定义Hook只做一件事，保持单一职责
- 在src/hooks目录下统一管理自定义Hook，如src/hooks/
- 提供清晰的文档和类型定义
性能优化建议
- 使用useCallback缓存传递给子组件的函数
- 使用useMemo缓存计算昂贵的值
- 合理设置useEffect的依赖数组，避免不必要的执行
- 对于复杂状态逻辑，优先考虑useReducer或dva
umi框架特有的实践
- 通过umi-plugin-dva管理全局状态
- 利用umi的约定式路由减少路由配置代码
- 使用mock数据功能简化开发
- 遵循umi的应用结构组织代码
React Hooks已经成为React开发的标准方式，掌握它们将极大提高你的开发效率和代码质量。在umi框架中充分利用React Hooks的优势，可以构建出更简洁、更可维护的React应用。
如果你想深入学习umi和React Hooks，可以参考以下资源：
- umi官方文档：README.md
- React Hooks官方文档：https://reactjs.org/docs/hooks-intro.html
- umi + dva教程：docs/guide/with-dva.md
希望本文介绍的技巧能帮助你更好地在umi项目中使用React Hooks。如果你有任何问题或发现更好的实践方法，欢迎在评论区分享！
【免费下载链接】umi A framework in react community ✨ 项目地址: https://gitcode.com/gh_mirrors/umi8/umi
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
