受控组件性能瓶颈在于高频输入同步更新状态引发重渲染，应通过防抖延迟状态同步、拆分局部状态、混合使用非受控字段、校验逻辑移出渲染流程等策略优化。

受控组件本身不是性能问题的根源，真正拖慢渲染的是“每次输入都同步更新状态+触发重渲染”这个链路。关键不是弃用受控模式，而是切断高频输入与高频渲染之间的强绑定。

用防抖延迟状态同步

用户连续输入时，不需要每敲一个字就更新一次 state。把 onChange 的处理逻辑包一层防抖，让状态只在用户停顿后才更新。

• 设置 300ms 防抖阈值，兼顾响应感和性能
• 输入过程中仍可做轻量校验（比如正则匹配），但不调用 setState
• 提交前再做一次全量校验，确保数据最终准确

拆分表单为独立受控子组件

整个大表单共用一个 formData 状态，会导致任意字段变化都触发全部字段重新 render。改成每个字段维护自己的局部状态，配合 React.memo 隔离影响范围。

• 每个 Input 封装成 FormField 组件，内部管理 value 和 error
• 父组件只传 onChange 回调，不传整个 formData 对象
• 用 useCallback 缓存回调函数，避免子组件因 props 变化而误判需重绘

混合使用非受控 + 受控策略

对不参与校验、不依赖实时值的字段（如纯展示型描述、静态下拉选项），直接用 defaultValue + ref 获取值，跳过 React 状态层。

• 提交时统一用 ref 读取非受控字段值，与受控字段合并提交
• 适合字段数量多但交互简单的场景，比如后台配置表单
• 注意：禁用浏览器自动填充时，defaultValue 可能失效，需加兼容逻辑

校验逻辑移出渲染流程

把正则校验、格式转换等计算放到 useEffect 或自定义 Hook 中，而不是写在 onChange 处理器里。避免同步阻塞主线程。

• 输入值变更后，先缓存 rawValue，等下一帧再执行校验
• 错误提示用单独 state 控制显示，校验失败不强制 rerender 输入框本身
• 复杂规则可预编译成函数，避免每次重复解析正则或 schema