antd中form源码分析

antd中Form底层其实使用的是rc-field-form, antd3之前使用的是rc-form.通过下面的demo,我们可以看一下form的简单实现.

下面是一个简单例子,可以简单看一下是如何使用的.

首先, Field组件会将传入的子组件克隆一遍,并且加入value, onChange等props,所以我们在输入或者选择等操作发生后,会触发添加的onChange事件,在添加的onChange事件中,最终dispatch触发updateValue.

另外,Field组件还会使用registerField方法将自身push到fieldEntities数组中,在updateValue时,会遍历fieldEntities,调用其onStoreChange方法.

而在updateValue时,首先根据传入的name和value去更新useForm创建的FormStore,然后再去通知observers, watches.具体在notifyObservers方法中,去调用Field对象上的onStoreChange.

Field组件中的onStoreChange方法会处理引发数据变化的各种情况,最终调用reRender方法.

reRender其实就是调用Component组件的forceUpdate方法,引发 React 更新, 因为从更新好的store中拿到新的value,已经和preValue不同, 所以界面会得到更新,输入值才会变化.

antd3之前,我们在使用Form的时候,需要使用Form.create创建一个高阶组件,根据name在高阶组件中创建state,然后onChange后使用setState,因为是在高阶组件中使用setState更新数据,传入的整个子组件都会重新渲染,这也是之前所说的antd Form性能问题的原因.但是这样也有好处,就是我们不必像antd4中的Form,在处理联动关系时,非常简单,不需要使用dependence,useWatch等手段.

antd4之后,Form改用filed-form,其实是将真正的渲染放到了Field组件中,避免了antd3的性能问题,但是带来最大的问题是,从antd3升级到之后的版本比较麻烦,而且在处理联动关系时,因为不再是整个Form都更新,而是里面的每个Field单独更细,所以必须使用dependence,useWatch等方法来进行处理,增加了许多代码量.