useState 交互式示例

通过实际运行代码来理解 React 中最常用的 Hook

基础用法

useState 返回一个状态值和更新该状态的函数。

✨ 关键要点:

useState(0) 中的 0 是状态的初始值
count 是当前的状态值
setCount 是更新状态的函数
调用 setCount 会触发组件重新渲染

对象状态

当状态是对象时,需要创建新对象而不是直接修改。

⚠️ 常见错误:

// ❌ 错误: 直接修改状态
user.name = '李四';
setUser(user);

// ✅ 正确: 创建新对象
setUser({
  ...user,
  name: '李四'
});

函数式更新

当新状态依赖于旧状态时,使用函数式更新。

💡 何时使用函数式更新:

新状态基于旧状态计算
需要在同一事件处理函数中多次更新状态
避免闭包陷阱(使用旧状态值)

惰性初始状态

如果初始状态需要通过复杂计算获得,可以使用函数。

⚡ 性能优化:

使用函数初始化状态,该函数只在组件首次渲染时执行一次, 不会在每次重新渲染时都执行。

// ❌ 每次渲染都会执行 expensiveComputation()
const [state, setState] = useState(expensiveComputation());

// ✅ 只在首次渲染时执行
const [state, setState] = useState(() => expensiveComputation());

最佳实践

✅ 推荐做法

保持状态简单,避免不必要的嵌套
使用多个 useState 而不是一个大对象
函数式更新处理依赖旧状态的情况
使用惰性初始化避免昂贵的计算

❌ 避免做法

不要直接修改状态对象
不要在渲染中调用 setState
不要在 useEffect 中缺少依赖的状态更新
避免状态过于复杂导致难以维护

进一步学习

掌握 useState 后,你可以继续学习:

useEffect - 处理副作用
useContext - 跨组件共享状态
useReducer - 管理复杂状态逻辑
useRef - 保留可变值

这篇文章有帮助吗？

Previous / Next

交互式示例

Related Links