React 复杂表单架构设计实践

复杂表单的问题通常不在“怎么把输入框渲染出来”，而在于字段之间的依赖、权限、校验、异步数据和性能边界。

字段建模

一个可维护的表单系统需要先定义字段元信息，而不是把规则散落在组件内部。

type FieldSchema = {
  name: string;
  label: string;
  visibleWhen?: string;
  disabledWhen?: string;
  rules?: string[];
};

字段模型承担描述职责，组件承担渲染职责，规则引擎承担计算职责。三者分离后，业务变化不会直接击穿组件结构。

状态边界

我更倾向把表单状态分为四类：

• 输入状态
• 派生状态
• 远程数据状态
• 提交流程状态

这些状态混在一起时，任何一次字段变更都可能触发大面积渲染，也会让问题定位变得困难。

性能策略

复杂表单的性能优化通常来自局部订阅、字段级渲染、规则计算缓存和异步校验节流。不要一开始就追求抽象极致，先明确哪些字段会高频变化。