antd中Form底層其實(shí)使用的是rc-field-form, antd3之前使用的是rc-form.通過下面的demo,我們可以看一下form的簡單實(shí)現(xiàn).

下面是一個(gè)簡單例子,可以簡單看一下是如何使用的.

首先, Field組件會(huì)將傳入的子組件克隆一遍,并且加入value, onChange等props,所以我們在輸入或者選擇等操作發(fā)生后,會(huì)觸發(fā)添加的onChange事件,在添加的onChange事件中,最終dispatch觸發(fā)updateValue.

另外,Field組件還會(huì)使用registerField方法將自身push到fieldEntities數(shù)組中,在updateValue時(shí),會(huì)遍歷fieldEntities,調(diào)用其onStoreChange方法.

而在updateValue時(shí),首先根據(jù)傳入的name和value去更新useForm創(chuàng)建的FormStore,然后再去通知observers, watches.具體在notifyObservers方法中,去調(diào)用Field對(duì)象上的onStoreChange.

Field組件中的onStoreChange方法會(huì)處理引發(fā)數(shù)據(jù)變化的各種情況,最終調(diào)用reRender方法.

reRender其實(shí)就是調(diào)用Component組件的forceUpdate方法,引發(fā) React 更新, 因?yàn)閺母潞玫膕tore中拿到新的value,已經(jīng)和preValue不同, 所以界面會(huì)得到更新,輸入值才會(huì)變化.

antd3之前,我們在使用Form的時(shí)候,需要使用Form.create創(chuàng)建一個(gè)高階組件,根據(jù)name在高階組件中創(chuàng)建state,然后onChange后使用setState,因?yàn)槭窃诟唠A組件中使用setState更新數(shù)據(jù),傳入的整個(gè)子組件都會(huì)重新渲染,這也是之前所說的antd Form性能問題的原因.但是這樣也有好處,就是我們不必像antd4中的Form,在處理聯(lián)動(dòng)關(guān)系時(shí),非常簡單,不需要使用dependence,useWatch等手段.

antd4之后,Form改用filed-form,其實(shí)是將真正的渲染放到了Field組件中,避免了antd3的性能問題,但是帶來最大的問題是,從antd3升級(jí)到之后的版本比較麻煩,而且在處理聯(lián)動(dòng)關(guān)系時(shí),因?yàn)椴辉偈钦麄€(gè)Form都更新,而是里面的每個(gè)Field單獨(dú)更細(xì),所以必須使用dependence,useWatch等方法來進(jìn)行處理,增加了許多代碼量.