企业官网建设流程全解析

React 目前强烈推荐使用函数组件（Functional Components）结合 Hooks来开发。它更简洁、灵活、可复用性更强，是现代 React 开发的主流方式。

本文重点介绍函数组件中最常用的 Hooks，帮助你快速掌握状态管理、副作用处理等核心能力。

一、常用 Hooks 详解

1. useState：管理组件状态

最基础的状态管理 Hook，用于在函数组件中添加局部状态。

import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // 初始值 0 return ( <div> <p>当前计数：{count}</p> <button onClick={() => setCount(count + 1)}>加 1</button> <button onClick={() => setCount(prev => prev + 1)}>函数式更新</button> </div> ); }

• setCount支持直接传新值或函数式更新（推荐后者，避免闭包问题）
• 状态更新是异步的，会合并多次更新

2. useEffect：处理副作用

用于处理数据获取、订阅、定时器等副作用操作。

import React, { useState, useEffect } from 'react'; function Timer() { const [seconds, setSeconds] = useState(0); useEffect(() => { const timer = setInterval(() => { setSeconds(prev => prev + 1); }, 1000); // 清理函数：组件卸载时执行 return () => clearInterval(timer); }, []); // 空依赖数组：只在挂载时执行一次 return <div>已运行 {seconds} 秒</div>; }

依赖数组规则：

• 无依赖数组：每次渲染后都执行
• []：仅在组件挂载和卸载时执行一次
• [dep1, dep2]：指定依赖变化时执行

3. useContext：消费 Context

避免 props 层层传递全局数据（如主题、用户信息）。

import React, { useContext } from 'react'; const ThemeContext = React.createContext('light'); function Button() { const theme = useContext(ThemeContext); return <button style={{ background: theme === 'dark' ? '#333' : '#fff' }}> 当前主题：{theme} </button>; }

4. useReducer：复杂状态逻辑管理

适合状态更新逻辑复杂、涉及多个子值或依赖前一个状态时。

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: return state; } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return ( <> Count: {state.count} <button onClick={() => dispatch({ type: 'increment' })}>加</button> <button onClick={() => dispatch({ type: 'decrement' })}>减</button> <button onClick={() => dispatch({ type: 'reset' })}>重置</button> </> ); }

5. useRef：获取 DOM 或保存可变值

• 获取 DOM 元素
• 保存不触发渲染的可变值

import React, { useRef, useEffect } from 'react'; function TextInput() { const inputRef = useRef(null); const focusInput = () => { inputRef.current?.focus(); }; useEffect(() => { focusInput(); // 自动聚焦 }, []); return ( <> <input ref={inputRef} type="text" /> <button onClick={focusInput}>手动聚焦</button> </> ); }

6. useMemo：缓存计算结果

避免昂贵计算在每次渲染时重复执行。

const expensiveValue = useMemo(() => { return computeExpensiveValue(a, b); }, [a, b]); // 只有 a 或 b 变化时重新计算

7. useCallback：缓存函数

防止子组件因函数引用变化而重复渲染。

const handleClick = useCallback(() => { // 处理逻辑 }, [dependency]);

二、其他实用 Hooks

• useLayoutEffect：在 DOM 更新后同步执行，适合测量布局
• useImperativeHandle：配合 forwardRef 自定义暴露给父组件的实例值
• useDeferredValue：延迟更新非紧急状态（React 18+）
• useTransition：标记过渡更新，保持 UI 响应性（React 18+）

总结

掌握以下核心 Hooks 即可应对 90% 的开发场景：

• useState+useEffect：基础状态与副作用
• useContext：全局数据共享
• useReducer：复杂状态逻辑
• useRef：DOM 操作与持久值
• useMemo/useCallback：性能优化

函数组件 + Hooks 是 React 的未来，代码更清晰、逻辑更集中，强烈推荐在新项目中全面使用！

有任何 Hooks 使用疑问，欢迎留言交流～