什么是useState？
useState 是 React Hooks 中最基础且重要的 Hook 之一，它让函数组件能够拥有内部状态管理能力。其基本语法如下：
const [state, setState] = useState(initialState);
核心特性与面试要点
1. 初始状态的两种设置方式
// 直接传递初始值
const [count, setCount] = useState(0);
// 通过函数惰性初始化（性能优化）
const [state, setState] = useState(() => {
const initialState = someExpensiveComputation(props);
return initialState;
});
面试考点：惰性初始化的使用场景和优势（避免每次渲染都执行昂贵计算）
2. 状态更新机制
// 直接更新
setCount(1);
// 函数式更新（基于前一个状态）
setCount(prevCount => prevCount + 1);
重要区别：
- 直接更新：适合独立的状态设置
- 函数式更新：必须在状态更新依赖于前一个状态时使用
3. 批量更新与异步性
React 会对状态更新进行批处理以提高性能：
function handleClick() {
setCount(count + 1);
setCount(count + 1); // 这不会使count增加2
// 正确方式
setCount(prev => prev + 1);
setCount(prev => prev + 1); // 现在会增加2
}
面试考点：理解 React 的批量更新机制和如何正确处理连续状态更新
4. 对象和数组的状态管理
// 对象状态更新
const [user, setUser] = useState({ name: 'John', age: 30 });
setUser(prev => ({ ...prev, age: 31 })); // 正确
setUser({ age: 31 }); // 错误：会丢失name属性
// 数组状态更新
const [items, setItems] = useState([]);
setItems(prev => [...prev, newItem]); // 添加
setItems(prev => prev.filter(item => item.id !== id)); // 删除
5. 与类组件setState的区别
| 特性 | useState | setState |
|---|---|---|
| 更新方式 | 替换式更新 | 合并式更新 |
| 异步性 | 异步批处理 | 异步批处理 |
| 回调函数 | 无内置回调，需用useEffect | 有回调参数 |
常见面试问题
1. 为什么不能条件性地调用useState？
React 依赖于 Hook 的调用顺序来正确关联状态。条件性调用会破坏这种顺序性。
2. 如何实现状态依赖更新？
使用函数式更新：setState(prev => prev + 1)
3. 如何处理复杂状态逻辑？
考虑使用 useReducer 或将相关状态组合成一个对象，但要注意更新时的不可变性。
4. useState 和 useRef 的区别是什么？
useState 触发重新渲染，useRef 不会且其 current 属性可变。
性能优化技巧
- 使用函数式更新避免依赖外部状态值
- 惰性初始化昂贵计算
- 复杂状态考虑使用 useReducer
- 对于不会触发渲染的值使用 useRef
实际代码示例
function Counter() {
const [count, setCount] = useState(0);
// 错误的连续更新
const badIncrement = () => {
setCount(count + 1);
setCount(count + 1); // 不会工作
};
// 正确的连续更新
const goodIncrement = () => {
setCount(prev => prev + 1);
setCount(prev => prev + 1); // 正常工作
};
return (
<div>
<p>Count: {count}</p>
<button onClick={goodIncrement}>+2</button>
</div>
);
}
总结
掌握 useState 的关键在于理解：
- 状态不可变性原则
- 函数式更新的重要性
- 批量更新机制
- 与类组件状态管理的区别
在面试中，不仅能解释概念，还能给出实际使用场景和优化方案的候选人会更有优势。
