深入理解 React 的 useState Hook

目录

一、什么是 useState？

二、useState基本用法

1. 引入useState

2.基本用法：

 3. 状态的更新

3.1 直接更新状态

3.2 函数式更新

4. 使用多个 useState

5. 复杂状态管理

5.1 对象状态

5.2 数组状态

6. 懒初始化

7. 注意事项

8. 性能优化

10. 错误边界

三、小案例

选择器与计数器

四、总结

---

一、什么是 useState？

useState 是 React 提供的一个 Hook，用于在函数组件中添加状态管理功能。它使得函数组件能够拥有自己的状态，类似于类组件中的 this.state 和 this.setState。

1. 状态（State）：

   • 状态是组件中可以变化的数据，用户的交互或其他因素可能会导致状态的改变。
   • 在 React 中，状态用于控制组件的行为和渲染输出。

2. Hook：

   • Hook 是 React 16.8 引入的特性，它允许在函数组件中使用状态和其他 React 特性。
   • useState 是最基本也是最常用的 Hook 之一。

二、useState基本用法