React 表单性能优化
React 表单性能问题的常见来源，以及受控输入、状态拆分、局部更新和组件边界之间的关系。
#tech / dev / frame
#resource / react
#type / synthesis
#status / growing
[!info] related notes
React 表单性能优化
React 表单性能问题通常不是“输入框本身太慢”，而是每次输入都带动了过大的状态联动和组件重新执行范围。
一句话定义
React 表单优化的核心是让输入更新尽量局部发生，避免一次输入触发整页级联重渲染和过重的同步计算。
表单为什么容易卡
- 每次输入都会触发 state 更新
- 状态放得过高，导致大块组件一起重新执行
- 输入过程中同步做了校验、格式化、筛选或请求
- 表单项太多，但状态和渲染边界没有拆开
最常见的优化方向
先缩小状态边界
- 单个字段或局部表单块能独立管理，就别全挂在页面顶层
- 局部状态越清晰，输入联动范围通常越小
再区分受控和非受控场景
- 复杂校验、联动、实时展示更适合受控组件
- 只是收集最终值或和原生表单库集成时，非受控也可以减少一些更新压力
避免把重计算塞进每次输入
- 实时校验要区分轻校验和重逻辑
- 昂贵计算、搜索过滤、网络请求不要无脑跟每次按键同步执行
大表单按区域拆分
- 把字段拆成独立组件
- 让错误提示、预览区、汇总区只在真正依赖的数据变化时更新
常见误区
- 一看到输入卡顿就先全局上
memo - 为了统一管理，把所有字段都放进一个顶层大对象 state
- 把“受控组件”误解成“所有输入都必须高频联动全页面”
最短记忆方式
输入更新尽量局部，重逻辑不要跟着每次击键同步跑。
面试要点
来自 react-form-performance-interview-question 的面试视角整理。
一句话回答
React 表单优化通常先控制状态边界，让一次输入只影响真正相关的局部组件，再根据场景选择受控或非受控方案，并把重校验、筛选和请求从高频输入链路里拆出去。
最稳的回答主线
- 第一层看状态位置：别把所有字段状态都提到页面最上层
- 第二层看组件拆分：让字段、错误提示、预览区分开更新
- 第三层看模式选择：复杂联动用受控，简单取值可考虑非受控
- 第四层看输入链路：重计算、请求和复杂校验不要跟每次按键完全同步
面试里容易加分的一句
很多表单卡顿不是因为 React 处理不了输入，而是因为我们把输入事件变成了“整页重新算一遍”的触发器。
常见追问
- 受控组件为什么更容易带来性能压力
- 大表单怎么拆状态更合理
- 什么时候非受控会更合适
最短记忆方式
先缩状态边界，再拆输入链路。