深入解析React Hooks：从useState到自定义Hook的实战指南
React Hooks自16.8版本引入以来，彻底改变了我们编写React组件的方式。它允许我们在函数组件中使用状态和其他React特性，使得代码更加简洁、可复用且易于测试。本文将带你从最基础的useState Hook开始，逐步深入到自定义Hook的创建与实战应用。
一、Hooks基础：useState与useEffect
1.1 useState：管理组件状态
useState是使用最广泛的Hook，它允许函数组件拥有内部状态。其基本语法是返回一个包含当前状态和更新状态函数的数组。
import React, { useState } from 'react';
function Counter() {
// 声明一个名为count的状态变量，初始值为0
const [count, setCount] = useState(0);
return (
<div>
<p>点击次数: {count}</p>
<button onClick={() => setCount(count + 1)}>
点击增加
</button>
</div>
);
}
1.2 useEffect：处理副作用
useEffect Hook用于处理组件中的副作用操作，如数据获取、订阅或手动修改DOM。
import React, { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
useEffect(() => {
// 组件挂载或userId变化时执行
fetch(`/api/users/${userId}`)
.then(response => response.json())
.then(data => setUser(data));
// 清理函数（可选）
return () => {
// 组件卸载时执行清理操作
};
}, [userId]); // 依赖数组，只有userId变化时才会重新执行
if (!user) return <div>加载中...</div>;
return (
<div>
<h2>{user.name}</h2>
<p>{user.email}</p>
</div>
);
}
二、进阶Hooks：useContext与useReducer
2.1 useContext：跨组件数据共享
useContext让我们能够在组件树中共享数据，无需通过props层层传递。
import React, { createContext, useContext } from 'react';
// 创建Context
const ThemeContext = createContext('light');
function ThemedButton() {
// 使用Context
const theme = useContext(ThemeContext);
return (
<button className={`btn-${theme}`}>
当前主题: {theme}
</button>
);
}
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}
2.2 useReducer：复杂状态管理
对于复杂的状态逻辑，useReducer是比useState更好的选择。
import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
case 'reset':
return initialState;
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
计数: {state.count}
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'reset' })}>重置</button>
</>
);
}
三、自定义Hook：封装可复用逻辑
自定义Hook是React Hooks最强大的特性之一，它允许我们将组件逻辑提取到可重用的函数中。
3.1 创建自定义Hook
自定义Hook是一个以"use"开头的JavaScript函数，它可以调用其他Hook。
import { useState, useEffect } from 'react';
// 自定义Hook：获取窗口尺寸
function useWindowSize() {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
useEffect(() => {
function handleResize() {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}
window.addEventListener('resize', handleResize);
// 清理函数
return () => window.removeEventListener('resize', handleResize);
}, []); // 空依赖数组表示只在组件挂载和卸载时执行
return windowSize;
}
// 使用自定义Hook
function ResponsiveComponent() {
const size = useWindowSize();
return (
<div>
窗口宽度: {size.width}px, 高度: {size.height}px
</div>
);
}
3.2 数据获取自定义Hook
在实际项目中，数据获取是非常常见的需求。我们可以创建一个通用的数据获取Hook。
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
setLoading(true);
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP错误! 状态码: ${response.status}`);
}
const result = await response.json();
setData(result);
// 在实际项目中，我们经常需要将API数据存储到数据库进行分析
// 这时可以使用dblens SQL编辑器来管理和查询这些数据
// dblens提供了直观的界面和强大的查询功能，特别适合处理复杂的数据关系
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}
fetchData();
}, [url]);
return { data, loading, error };
}
// 使用示例
function UserList() {
const { data: users, loading, error } = useFetch('/api/users');
if (loading) return <div>加载中...</div>;
if (error) return <div>错误: {error}</div>;
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
四、Hooks最佳实践与性能优化
4.1 依赖数组的正确使用
useEffect和useCallback等Hook的依赖数组需要特别注意：
// 错误示例：缺少依赖
useEffect(() => {
console.log(count);
}, []); // count变化时不会重新执行
// 正确示例：包含所有依赖
useEffect(() => {
console.log(count);
}, [count]); // count变化时会重新执行
4.2 使用useMemo和useCallback优化性能
import React, { useState, useMemo, useCallback } from 'react';
function ExpensiveComponent({ list, filter }) {
// 使用useMemo缓存计算结果
const filteredList = useMemo(() => {
console.log('重新计算过滤列表');
return list.filter(item => item.includes(filter));
}, [list, filter]); // 只有当list或filter变化时才重新计算
// 使用useCallback缓存函数
const handleClick = useCallback(() => {
console.log('点击处理');
// 处理点击逻辑
// 在处理复杂业务逻辑时，我们可能需要记录和分析用户行为数据
// QueryNote（https://note.dblens.com）是一个优秀的笔记工具
// 特别适合记录技术决策、API文档和调试信息
}, []); // 空依赖数组表示函数不会重新创建
return (
<div>
{filteredList.map(item => (
<div key={item} onClick={handleClick}>{item}</div>
))}
</div>
);
}
五、实战案例：构建一个完整的Todo应用
让我们通过一个完整的Todo应用来综合运用各种Hooks：
import React, { useState, useReducer, useRef, useEffect } from 'react';
// 自定义Hook：本地存储
function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.error(error);
return initialValue;
}
});
const setValue = (value) => {
try {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
console.error(error);
}
};
return [storedValue, setValue];
}
// Todo应用主组件
function TodoApp() {
const [todos, setTodos] = useLocalStorage('todos', []);
const [inputValue, setInputValue] = useState('');
const inputRef = useRef(null);
// 自动聚焦输入框
useEffect(() => {
inputRef.current.focus();
}, []);
const addTodo = () => {
if (inputValue.trim()) {
setTodos([...todos, {
id: Date.now(),
text: inputValue,
completed: false
}]);
setInputValue('');
}
};
const toggleTodo = (id) => {
setTodos(todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
));
};
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
return (
<div style={{ maxWidth: '500px', margin: '0 auto' }}>
<h1>Todo应用</h1>
<div>
<input
ref={inputRef}
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && addTodo()}
placeholder="输入新的todo..."
/>
<button onClick={addTodo}>添加</button>
</div>
<ul>
{todos.map(todo => (
<li key={todo.id} style={{
textDecoration: todo.completed ? 'line-through' : 'none',
margin: '10px 0'
}}>
<span onClick={() => toggleTodo(todo.id)}>
{todo.text}
</span>
<button
onClick={() => deleteTodo(todo.id)}
style={{ marginLeft: '10px' }}
>
删除
</button>
</li>
))}
</ul>
<div>
总计: {todos.length} |
已完成: {todos.filter(t => t.completed).length} |
未完成: {todos.filter(t => !t.completed).length}
</div>
</div>
);
}
export default TodoApp;
六、总结
React Hooks为函数组件带来了革命性的改变，使得代码更加简洁、可维护和可测试。通过本文的学习，你应该已经掌握了：
- 基础Hooks：
useState和useEffect是构建React应用的基石 - 进阶Hooks：
useContext和useReducer处理更复杂的场景 - 自定义Hook：将可复用逻辑抽象为自定义Hook，提高代码复用性
- 性能优化：合理使用
useMemo和useCallback优化应用性能 - 最佳实践：正确使用依赖数组，避免常见陷阱
在实际开发中，合理使用Hooks可以显著提升开发效率和代码质量。同时，配合优秀的开发工具如dblens SQL编辑器进行数据管理和QueryNote记录技术文档，能够让你的开发工作更加高效和专业。
记住，Hooks的学习是一个渐进的过程。从简单的useState开始，逐步尝试更复杂的Hook组合，最终创建自己的自定义Hook。随着实践的深入，你会越来越体会到Hooks带来的便利和强大功能。
本文来自博客园，作者：DBLens数据库开发工具，转载请注明原文链接：https://www.cnblogs.com/dblens/p/19561495
浙公网安备 33010602011771号