React Hooks 是 React 16.8 引入的核心特性,允许在函数组件中使用状态、生命周期等特性,替代类组件的复杂逻辑。以下是常用 Hooks 的详细解析及最佳实践:
1. useState
:状态管理
用途:在函数组件中定义和更新局部状态。
示例:
import { useState } from 'react';const Counter = () => {const [count, setCount] = useState(0); // 初始值 0return (<button onClick={() => setCount(count + 1)}>Clicked {count} times</button>);
};
注意:
- 状态更新是异步的,连续调用
setCount(count + 1)
不会立即生效。 - 若新状态依赖旧状态,应使用函数形式:
setCount(prev => prev + 1)
。
2. useEffect
:副作用处理
用途:处理组件生命周期中的副作用(如数据请求、DOM 操作、订阅)。
示例:
import { useEffect, useState } from 'react';const DataFetcher = ({ url }) => {const [data, setData] = useState(null);useEffect(() => {const fetchData = async () => {const response = await fetch(url);setData(await response.json());};fetchData();}, [url]); // 依赖项:url 变化时重新执行return <div>{data ? data.name : 'Loading...'}</div>;
};
注意:
- 依赖项数组:
- 空数组
[]
:仅在组件挂载时执行(类似componentDidMount
)。 - 无数组:每次渲染后都执行(慎用)。
- 包含变量:变量变化时重新执行。
- 空数组
- 清理函数:返回一个函数用于清理(如取消订阅、移除事件监听):
useEffect(() => {const timer = setInterval(() => {}, 1000);return () => clearInterval(timer); // 组件卸载时清理 }, []);
3. useContext
:跨组件数据传递
用途:在组件树中共享数据,避免逐层传递 props。
示例:
import { createContext, useContext } from 'react';// 1. 创建 Context
const ThemeContext = createContext('light');// 2. 提供数据
const App = () => (<ThemeContext.Provider value="dark"><Toolbar /></ThemeContext.Provider>
);// 3. 消费数据
const Toolbar = () => {const theme = useContext(ThemeContext);return <div>Current theme: {theme}</div>;
};
4. useReducer
:复杂状态逻辑
用途:类似 Redux 的状态管理,适合多状态关联或复杂更新逻辑。
示例:
import { 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 };default:throw new Error();}
}const Counter = () => {const [state, dispatch] = useReducer(reducer, initialState);return (<>Count: {state.count}<button onClick={() => dispatch({ type: 'increment' })}>+</button><button onClick={() => dispatch({ type: 'decrement' })}>-</button></>);
};
适用场景:状态更新涉及多个子值、依赖前一个状态、需要集中化管理。
5. useCallback
和 useMemo
:性能优化
useCallback
:缓存函数
const handleClick = useCallback(() => {console.log('Clicked:', count);
}, [count]); // count 变化时重新创建函数
useMemo
:缓存计算结果
const expensiveValue = useMemo(() => {return computeExpensiveValue(a, b);
}, [a, b]); // a/b 变化时重新计算
最佳实践:
- 仅当子组件依赖这些值且用
React.memo
优化时使用。 - 避免滥用,内存缓存本身也有开销。
6. useRef
:持久化引用
用途:
- 访问 DOM 元素。
- 保存可变值(类似类组件的实例变量),不会触发重新渲染。
示例:
const TextInput = () => {const inputRef = useRef(null);const focusInput = () => {inputRef.current.focus();};return (<><input ref={inputRef} /><button onClick={focusInput}>Focus</button></>);
};
7. useLayoutEffect
:同步副作用
用途:与 useEffect
类似,但会在 DOM 更新后同步执行(在浏览器绘制前)。
适用场景:需要直接操作 DOM 并确保用户看不到中间状态(如测量元素尺寸)。
示例:
useLayoutEffect(() => {const { width } = divRef.current.getBoundingClientRect();setWidth(width); // 确保在渲染前获取最新尺寸
}, []);
8. 自定义 Hook:逻辑复用
用途:将组件逻辑封装为可复用的函数。
示例:自定义 useFetch
:
const useFetch = (url) => {const [data, setData] = useState(null);useEffect(() => {const fetchData = async () => {const response = await fetch(url);setData(await response.json());};fetchData();}, [url]);return data;
};// 使用
const MyComponent = () => {const data = useFetch('/api/data');return <div>{data}</div>;
};
Hooks 使用规则
- 只在顶层调用:不能在条件、循环或嵌套函数中使用 Hooks。
- 仅在 React 函数组件或自定义 Hook 中使用。
总结
Hook | 核心用途 | 典型场景 |
---|---|---|
useState | 管理组件内部状态 | 计数器、表单输入 |
useEffect | 处理副作用(数据请求、订阅) | API 调用、事件监听 |
useContext | 跨组件共享数据 | 主题、用户身份全局传递 |
useReducer | 复杂状态逻辑管理 | 表单多字段、状态机 |
useCallback | 缓存函数,避免子组件无效渲染 | 传递回调函数给优化过的子组件 |
useMemo | 缓存计算结果,减少重复计算 | 复杂计算、优化渲染性能 |
useRef | 访问 DOM 或保存可变引用 | 输入框聚焦、保存定时器 ID |
useLayoutEffect | 同步 DOM 操作 | 测量元素尺寸、强制同步更新 |
合理使用 Hooks 能显著提升代码可读性和可维护性,但需注意避免过度优化和滥用内存缓存。