antd Form 监听数据变化的2种方式比较。onValuesChange vs Form.useWatch

1、onValuesChange

  const onValuesChange = (changedValue: any) => {
    console.log('changedValues', changedValue);//此处只会展示，form里发生变更的属性
  };

2、Form.useWatch

此方式类似于 使用useState包裹的数据。是可以实时更新的。参考官网使用方式

  const language = Form.useWatch('language', form);
  console.log('language', language);

区别：

1. 使用 form.setFields 和 form.setFieldsValue 触发的改动。Form.useWatch可以监听到，并动态更新。但是onValuesChange监听不到。
2. Form.useWatch监听的数据可以直接动态更新，方便直接消费（展示到页面引起重新render）。onValuesChange则适合只是获取不做往页面动态更新的操作。
3. Form.useWatch的第一个参数是path。在需要监听的form数据层级比较深的情况下，可以很明确的指定需要监控的数据的path。onValuesChange则不好判断，此次更新的是否是我们需要的 路径。
4. useWatch只适用于 > 4.20.0的版本