React
Hooks
Desenvolvimento
JavaScript
React19

探索 React Hooks 和 React 19 创新

探索 React Hooks 和 React 19 创新

Hooks 允许功能组件优雅地管理状态、副作用和复杂逻辑，彻底改变了 React 开发。 React 19 引入了新的钩子以进一步简化工作流程。在本文中，我们将通过实际示例探讨经典钩子、高级钩子以及版本 19 中的新增功能。

基本 React Hook

useState：简单状态管理

管理功能组件中的本地状态。非常适合随时间变化的值。

示例：交互式计数器

从'react'导入{useState}；

函数计数器() { const [count, setCount] = useState(0);

返回（

您点击了 {count} 次

<按钮 onClick={() => setCount(count + 1)}> 增量 </按钮>
）； }

useEffect：副作用

渲染后执行代码，例如 API 调用或 DOM 操作。

示例：从 API 获取数据

从 'react' 导入 { useState, useEffect };

函数用户列表（）{ const [用户，setUsers] = useState([]);

使用效果（（）=> { fetch('https://api.example.com/users') .then(响应=>response.json()) .then(数据 => setUsers(数据)); }, []); // 只执行一次

返回（

    {users.map(用户=>(
  • {user.name}
    • ))}
）； }

useContext：全局状态共享

无需进行 prop 钻取即可访问上下文值。

示例：深色/浅色主题

从 'react' 导入 { createContext, useContext, useState };

const ThemeContext = createContext();

函数应用程序（）{ const [主题，setTheme] = useState('light');

返回（ <ThemeContext.Provider value=> <工具栏/> </ThemeContext.Provider> ）； }

函数工具栏() { const { 主题, setTheme } = useContext(ThemeContext);

返回（ <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> 切换到主题 {theme === 'light' ? “暗”：“亮”} </按钮> ）； }

useRef：可变引用

存储在渲染之间持续存在的值，而不会导致重新渲染。

示例：专注于输入

从'react'导入{useRef}；

函数文本输入() { const inputRef = useRef(null);

const focusInput = () => { inputRef.current.focus(); };

返回（

）； }

高级和定制的 Hook

useReducer：复杂状态

使用更复杂的逻辑管理状态，类似于 Redux。

示例：任务列表

从'react'导入{useReducer}；

函数 todosReducer（状态，操作）{ 开关（动作.类型）{ 案例“ADD_TODO”： return [...state, { text: action.text, 完成: false }]; 案例“TOGGLE_TODO”： 返回状态.map（（待办事项，索引）=> 索引 === 动作.索引 ? { ...todo, 已完成: !todo.completed } : 待办事项 ）； 默认： 返回状态； } }

函数 TodoApp() { const [todos, 调度] = useReducer(todosReducer, []);

const handleSubmit = (e) => { e.preventDefault(); 调度({ 类型: 'ADD_TODO', 文本: e.target.elements.todo.value }); e.target.reset(); };

返回（

<输入名称=“待办事项”/> </形式> {todos.map((todo, 索引) => ( < 键={索引} onClick={() => 调度({ 类型: 'TOGGLE_TODO', 索引 })} style={ textDecoration: todo.completed ? '直通'：'无'} > {todo.text}
))} ）； }

useMemo 和 useCallback：性能优化

  • useMemo： 记住计算值。
  • useCallback： 记住函数。

示例：大量计算

从 'react' 导入 { useMemo, useState };

函数 ExpenseComponent({ 列表 }) { const SortedList = useMemo(() => { console.log('订单列表...'); 返回[...列表].sort(); }, [列表]);

返回

{sortedList.join(', ')}
; }

自定义 Hook：逻辑重用

示例：useFetch 用于 HTTP 请求

从 'react' 导入 { useState, useEffect };

函数 useFetch(url) { const [数据，setData] = useState(null); const [正在加载，setLoading] = useState(true);

使用效果（（）=> { 获取（网址） .then(res => res.json()) .then(数据 => { 设置数据（日期）； 设置加载（假）； }); }, [网址]);

返回{数据，加载}； }

// 组件中的用法： 函数 UserProfile({ userId }) { const { 数据：用户，加载 } = useFetch(0);

if (loading) return

正在加载...
; 返回
{用户名}
; }

新的 React 19 Hooks

useOptimistic：乐观更新

在服务器提交之前更新 UI，在失败时回滚。

示例：乐观评论添加

从 'react' 导入 { useOptimistic } ；

函数 CommentForm({ onSubmit }) { const [optimisticComments, addOptimisticComment] = useOptimistic( [], (状态, newComment) => [...状态, { 文本: newComment, 发送: true }] ）；

const handleSubmit = async (e) => { e.preventDefault(); const formData = new FormData(e.target); const comment = formData.get('comment');

添加乐观评论（评论）；

尝试{
  等待提交（评论）；
} 捕获（错误）{
  // 如果请求失败则恢复UI
}

};

返回（

<输入名称=“评论”/> </形式> {optimisticComments.map((评论, 索引) => ( <div style=> {评论.文本}
))} ）； }

useResource：与 Suspense 集成

以声明方式管理异步数据。

示例：带回退的数据加载

从 'react' 导入 { useResource, Suspense };

函数 fetchUser(id) { // 返回一个承诺 }

函数 UserProfile({ userId }) { const userResource = useResource(() => fetchUser(userId));

返回

{userResource.read().name}
; }

// 在父组件中的用法： <Suspense Fallback={

正在加载用户...
}> <用户配置文件 userId={1} /> </悬念>

useEventListener：简化的事件监听器

干净地管理事件监听器。

示例：监视器窗口大小

从'react'导入{useEventListener}；

函数窗口大小（）{ const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });

useEventListener('调整大小', () => { setSize({ 宽度: window.innerWidth, 高度: window.innerHeight }); });

return

窗口大小：{size.width}x{size.height}
; }

useMediaQuery：响应式设计

对媒体查询的变化做出反应。

示例：带有系统偏好设置的深色主题

从'react'导入{useMediaQuery}；

函数 DarkModeToggle() { const PreferredDark = useMediaQuery('(首选颜色方案：深色)'); const [isDark, setIsDark] = useState(prefersDark);

// 在这里更新站点主题...

返回（ <按钮 onClick={() => setIsDark(!isDark)}> {是黑暗的吗？ '禁用深色模式' : '启用深色模式'} </按钮> ）； }

useErrorBoundary：优雅的错误处理

捕获子组件中的错误。

示例：自定义错误阈值

从'react'导入{useErrorBoundary}；

函数ErrorProneComponent() { const { ErrorBoundary, didCatch, 错误 } = useErrorBoundary();

返回 didCatch ？ （

发生错误：{error.message}
) : ( <错误边界> <可能失败的组件/> </错误边界> ）； }

结论

React hooks 不断发展，带来了简化开发的强大工具。在 React 19 中，useOptimistic 和 useResource 等功能通过流畅地处理异步操作来提升用户体验，而 useMediaQuery 和 useEventListener 等挂钩可以更轻松地创建自适应界面。

通过掌握这些钩子，从基础到最新，您将能够构建更健壮、高性能且更易于维护的应用程序。尝试将这些技术集成到您的项目中，看看它们如何改变您的工作流程！ 🚀

另请阅读

  • [TypeScript 应用程序：TypeScript 开发指南1
  • [如何创建网站：从零到艺术完整指南2
  • [如何制作专业网站：完整指南3
  • 【创建专业网站：完整的Web开发指南4
  • [2025年现代Web发展：趋势、工具和创新策略5
  • [使用 React Hook Form 实现复杂表单的 UX 最佳实践6
GitHub
LinkedIn
X
youtube