場(chǎng)景

子組件中，某一個(gè)表格的數(shù)據(jù)需要依賴于上級(jí)組件的某一個(gè)表單元素值進(jìn)行計(jì)算。

毫無(wú)疑問(wèn)，首先想到的肯定是監(jiān)聽(tīng) form 表單中元素的值，使用 useEffect 監(jiān)聽(tīng)表單的變化，當(dāng)值發(fā)生變化時(shí)，重新計(jì)算渲染。

首先說(shuō)下我的代碼結(jié)構(gòu)：

Form 表單是一個(gè)子組件，表格組件也是一個(gè)子組件，且是比較深的子組件（包含在tab標(biāo)簽頁(yè)下）。如果說(shuō) Form子組件是一級(jí)子組件，那么表格組件就是一個(gè)四級(jí)子組件。

在這種多層嵌套下，如何把 form 數(shù)據(jù)傳遞給對(duì)應(yīng)的表格子組件？

毫無(wú)疑問(wèn)，選擇使用：useContext

在頂層組件中通過(guò) Form.useForm() 定義 Form 實(shí)例，管理數(shù)據(jù)狀態(tài)，通過(guò) <context.Provider value={}></context.Provider>傳遞，表單子組件和表格子組件都可進(jìn)行接收。

不過(guò)在子組件監(jiān)聽(tīng)代碼寫好后，卻發(fā)現(xiàn)了一個(gè)比較尷尬的問(wèn)題：

表單元素的值發(fā)生了改變，但子組件的useEffect 卻沒(méi)能監(jiān)聽(tīng)到。

// 子組件
import React, { useContext } from 'react'
import context from 'xxx/xxx'

const { form } = useContext<any>(context)

useEffect(() => {
	console.log('監(jiān)聽(tīng)到了變化')
	// 下面是具體的邏輯
}, [form.getFiledValue('xx')])

注意：

當(dāng)時(shí)令我困惑的是：

當(dāng) Form 表單組件的某個(gè)表單元素值改變時(shí)，雖然子組件 useEffect 沒(méi)有監(jiān)聽(tīng)到變化，但通過(guò)表格子組件的輸入框的 onBlur 事件，調(diào)用 form.getFiledValue('xx')，卻可以拿到最新的值。

分析

需求終歸還是要往下開(kāi)發(fā)的，監(jiān)聽(tīng)不了，那就想辦法監(jiān)聽(tīng)！

在項(xiàng)目中，我是使用了 const [form] = Form.useForm(); 來(lái)創(chuàng)建 Form 實(shí)例，管理表單數(shù)據(jù)狀態(tài)，這也是函數(shù)式組件推薦的一種方式。

通過(guò)使用 useForm ，會(huì)讓表單成為 非受控組件，不用通過(guò) useState 創(chuàng)建state 來(lái)維護(hù)數(shù)據(jù)。

而且 ant 官網(wǎng) 里面也說(shuō)了：使用這種方式與其他獲取數(shù)據(jù)的方式的區(qū)別：

Form 僅會(huì)對(duì)變更的 Field 進(jìn)行刷新，從而避免完整的組件刷新可能引發(fā)的性能問(wèn)題，因而無(wú)法在 render 階段通過(guò) form.getFieldsValue 來(lái)實(shí)時(shí)獲取字段值。

看到這里，其實(shí)已經(jīng)很清楚了，因?yàn)?使用了 useForm，導(dǎo)致表單變成了 非受控組件，不能通過(guò) useState 來(lái)創(chuàng)建 state 維護(hù)數(shù)據(jù)，只能通過(guò)

form.getFieldsValue() / form.setFieldsValue() 

來(lái)獲取及設(shè)置表單數(shù)據(jù)，ant design 官方文檔也有介紹。所以在這種情況下， 使用 useEffect 監(jiān)聽(tīng)不到 form 表單的變化。

換句話說(shuō)：

form.getFieldValue('xxx'); 

并不是響應(yīng)式的，由其取到的值，并不會(huì)觸發(fā) UI 更新，即：它不是一個(gè) state。 

不過(guò)，可能有人會(huì)問(wèn)：我之前也使用過(guò) useEffect 來(lái)監(jiān)聽(tīng) form.getFieldValue(‘xxx’)，UI也能正常渲染啊，你這里是不是說(shuō)錯(cuò)了？

答： 沒(méi)有說(shuō)錯(cuò)，我自己之前也有這樣的疑問(wèn)，也遇到過(guò)這類問(wèn)題。

在實(shí)際項(xiàng)目中，一個(gè) react 組件的 re-render 次數(shù)是不可控的， 特別是代碼寫的不那么規(guī)范的時(shí)候，

所以，當(dāng)看到 UI 更新的時(shí)候，或許是在新的 re-render 中被連帶著更新了；

又或許是項(xiàng)目代碼中 Form組件既使用了 form = {form} 屬性，又使用了 initialValues 屬性。

如下所示：

//
const [form] = Form.useForm();

<Form initialValues={formData} form={form} ref={formRef}> </Form>

解決方案

方案1

ant design @4.20 版本推出了一個(gè)新特性：Form.useWatch，可以直接獲取 form 中字段對(duì)應(yīng)的值，應(yīng)該是可以監(jiān)聽(tīng)到的，具體用法可以參考官網(wǎng)，這里不多做贅述。

可是 4.2 版本后才支持，我的項(xiàng)目版本是 4.12.3，暫不支持這個(gè)hooks，部門領(lǐng)導(dǎo)也不讓進(jìn)行 ant 升級(jí)，所以就沒(méi)有嘗試這種寫法。

而且使用這種方法，固然可以監(jiān)聽(tīng)到，不過(guò)性能不是太好，不建議使用。

因?yàn)樗鼤?huì)觸發(fā)整個(gè)組件的 re-render，當(dāng)組件比較大且監(jiān)聽(tīng) input 實(shí)時(shí)輸入時(shí)，性能消耗就很恐怖。

方案2

拒絕使用 Form.useForm()，使用 initialValues 屬性，是表單變成一個(gè)可控組件，擁有 state，就可以正常監(jiān)聽(tīng)。

不過(guò)對(duì)于我的項(xiàng)目代碼來(lái)說(shuō)，改動(dòng)量太大，不劃算。

方案3

使用 useState 額外定義個(gè) state ，當(dāng)表單元素值發(fā)生變化時(shí)，使用 setState()，然后將其值通過(guò) context.Provider傳遞，在子組件監(jiān)聽(tīng)。

方案4

使用 useReducer

useReducer 與 useState 都是用來(lái)存儲(chǔ)和更新 state，相當(dāng)于 useState 的升級(jí)版。

當(dāng) type 數(shù)量較多時(shí)，建議使用 useReducer

方案5

Ant Plus 5 的 Watch 組件

專門用于監(jiān)聽(tīng)表單字段變化，并更新局部UI。（沒(méi)嘗試過(guò)）

總結(jié)

其實(shí)核心要點(diǎn)就一句話：

Form 內(nèi)置方法，不是響應(yīng)式的（即不是一個(gè)state），由其設(shè)置或者獲取的值，不會(huì)觸發(fā)UI更新，只能對(duì)變更的field進(jìn)行刷新。

想要對(duì)其進(jìn)行監(jiān)聽(tīng)也很簡(jiǎn)單，將其變成一個(gè)state即可。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論