一种简单的响应式表单设计
在 Vue 和 React 中，基本的性能优化应该就是尽可能地控制 diff 的行为，那么可以先看看 React 官方文档的表单是怎么设计的。
javascript
这看起来没什么问题，然而当表单组件的数量增加时，每次表单的输入变化后，都会触发所有的表单组件进行不必要的重新构造（vnode recreate），那么这很显然需要进行一点优化，通过一种响应式结构，能很好的解决这个问题。
表单对象设计
响应式结构应由四部分组成，Getter，Setter，Subscriber，Notifier，对应到下面的四个函数中。
typescript
初始化
首先需要定义一些数据结构，以便后续能够对表单数据进行操作。
typescript
Getter
typescript
Setter
需要注意的是，为了能够通知监听者数据变更了，你需要在数据变化时输出变更信息，所以，监听数组需要在这里触发回调。
typescript
Subscriber
订阅者的设计是，返回了取消监听的方法。
typescript
Notifier
typescript
这样就完成了基本的响应式表单对象的设计。
搭配 React 的设计
看看搭配 React 是怎么使用的吧。
首先是 FormGroup 在组件中的持久化。
typescript
提供一个监听数据变更的 hook。
typescript
提供一个获取变更数据的hook。
typescript
表单组件设计
表单组件的设计思路很多，无外乎三种做法。
- 统一的输入输出（Antd 等）。
- 用类选择器获取表单组件（Bootstrap 等）。
下面提供了一种简单的思路：表单组件提供统一的输入输出 value 和 onValueChange，通过依赖注入的方式，重写表单组件相应的输入输出接口。
typescript
使用方式如下：
typescript
总结
本文详细介绍了响应式表单的设计思路，希望能给大家提供一点帮助。