函数式编程通过纯函数、不可变数据和声明式订阅简化表单逻辑:状态更新返回新对象,字段联动可组合,校验用either类型链式处理,错误作为数据流统一管理,高阶函数封装防抖、加载态等通用行为。

函数式编程能显著简化复杂表单的交互逻辑,核心在于把“状态变化”转化为“数据转换”,避免副作用和隐式依赖。
用纯函数处理字段更新
不直接修改表单对象,而是每次输入都返回一个新状态。例如:
- 输入姓名时,调用 updateField(form, 'name', 'Alice'),该函数返回全新表单对象,原对象不变
- 多个字段联动(如选省→自动填默认城市)可组合成 compose(updateProvince, syncCity, validateAddress)
- 所有转换函数无外部依赖、不改全局变量、相同输入必得相同输出,便于单元测试
用不可变结构管理验证状态
把错误信息也当作数据流的一部分,而非散落在组件 state 或 DOM 中:
- 定义 ValidationResult = { valid: boolean; errors: Record
} - 每个字段校验写成独立函数:emailValidator = (v) => v && v.includes('@') ? Right(v) : Left('邮箱格式不正确')
- 用 Either 类型串联校验链,失败时短路并聚合全部错误,不靠 try-catch 或 if 嵌套
用声明式订阅替代手动监听
放弃反复绑定 onInput/onBlur,转为描述“哪些数据会影响哪些 UI”:
- 在 re-frame 中,(reg-sub :form/user-errors ...) 让组件只关心“当前错误是什么”,不关心谁触发了它
- 在 React + Redux 中,useSelector(state => pick(state.form, ['name', 'email'])) 自动响应字段变化,无需手动 setState
- ncform 的 valueTemplate 和 linkFields 本质也是声明式:你写 “当 A 变化时,B 应等于 C + D”,框架负责执行
用高阶函数封装通用行为
把重复模式抽成可复用、可配置的函数:
- debounceSubmit(handler, 300):包装提交逻辑,防抖 300ms
- withLoading(submitFn):返回一个新函数,自动管理 loading 状态
- required('用户名不能为空')(value):验证器本身是函数,参数是提示文案,返回另一个函数用于实际校验











