第2天 #100DaysofCode — 理解 React State

Source: Dev.to

理解 React State

今天是我 100 Days of Code 之旅的第 2 天。目标是了解 React 中的 state 是什么以及 useState 如何工作。学习 React state 时，它可能显得抽象，所以我们用一个简单的餐厅类比来帮助理解 state、重新渲染（re‑renders）和交互性。

餐厅类比

• State = 客人桌子上的当前订单。
  • 示例订单：
    • 汉堡
    • 披萨
    • 可乐

订单随时可以更改。在 React 中，state 告诉组件现在应该显示什么，就像订单告诉服务员桌子上应该摆放哪些食物。

如果没有 state，React 组件就像一张永远只展示同一道菜的餐桌，无论客人点了什么。

State 能实现的

• 动态 UI
• 数据变化
• 响应用户操作

就像服务员根据新订单更新餐桌，React 组件在 state 变化时会更新。

State 在 React 中的工作方式

当用户进行交互（例如 “加薯条”、 “换饮料”）时，订单会改变。在 React 中表现为：

• 点击按钮
• 在输入框中输入
• 切换某个选项

这些操作会触发 state 更新，进而导致组件重新渲染。

批处理与调度

State 更新不会立即生效。类似于服务员的工作流程：

1. 记录下新的订单
2. 把订单发送到厨房
3. 食物准备好后更新餐桌

React 会批量处理并调度这些变化，以获得更流畅的性能。

State 更新与重新渲染

1. State 变化（例如 “披萨 → 意面”）
2. React 重新渲染组件
3. UI 刷新，显示新的 state

这确保了餐桌（UI）始终反映当前的订单（state），不会出现过时的菜品。

• 重新渲染 = 根据最新订单刷新餐桌上的内容。
• 每一次变化都会触发一次全新的、更新后的显示。

关键要点

• State = 餐桌上的当前订单。
• State 变化 = 客人修改他们的订单。
• 交互性 = 客人的操作导致上菜内容的变化。
• State 更新是异步的，因为它们被高效调度。
• 每一次 state 变化都会触发一次重新渲染，使 UI 与最新的 state 保持同步。

如果你喜欢这种拆解方式，欢迎关注——这就是我的第 2 天 100 Days of Code。