React 表单处理不只是“如何双向绑定输入框”，更适合理解成一条渐进增强的链路：先管理输入值，再组织复杂状态，再处理提交、副作用、乐观反馈和动作结果。
一条主线
useState → useReducer → useEffect → useOptimistic / useActionState
如果表单只是几个简单输入框，问题通常还停留在局部状态；一旦涉及异步提交、错误处理、反馈节奏和提交结果组织，就会自然走到后几层。
第一层：先管理输入值
useState
适合：
- 输入框值
- 勾选状态
- 展开收起
- 简单校验提示
这一层解决的是：
- 表单最基本的局部状态维护
第二层：表单状态开始复杂化
useReducer
适合：
- 多字段联动
- 有明显状态迁移
- 一个动作会同时影响多个字段
例如：
- 多步骤表单
- 复杂筛选面板
- 带重置和批量更新逻辑的编辑器
这一层解决的是：
- 表单状态如何从零散字段升级为统一规则
第三层：表单开始接入外部世界
useEffect
适合：
- 根据字段变化请求联动数据
- 同步浏览器 API
- 监听外部输入源
这一层解决的是：
- 表单何时开始和外部系统同步
但要注意：
- 不是所有表单逻辑都应该放进 effect
- 纯粹的派生校验和派生显示，优先留在 render 或状态设计里
第四层：提交反馈开始变重要
useOptimistic
适合：
- 用户提交后，希望立刻看到成功后的界面趋势
- 例如新增评论、发送消息、即时列表添加
这一层解决的是：
- 提交还没完成时，用户先看到什么
第五层：提交结果开始需要自然落地
useActionState
适合：
- 围绕表单动作维护提交中、成功、失败等结果状态
- 想避免手动拆很多
isSubmitting / error / result
这一层解决的是：
- 提交结果如何围绕 action 自然组织
两条常见升级路径
路径一：传统局部状态表单
useState → useReducer → useEffect
适合：
- 表单逻辑主要还是本地交互与联动
路径二：现代提交体验表单
useState → useOptimistic / useActionState
适合：
- 你更关心提交反馈、乐观展示和结果落地
一个更准确的理解
React 表单处理不是围绕“怎么拿到 input 的 value”展开，而是围绕这几个问题展开：
- 输入值怎么维护
- 多字段逻辑怎么组织
- 提交时怎么同步外部系统
- 用户先看到什么反馈
- 提交结果最终怎么落地
也就是说，表单处理本身就是一条小型的渐进增强链路。