feat: form add selfUpdate #1049

Author: tangjinzhou

components/form/Form.jsx

@@ -63,6 +63,7 @@ export const FormProps = {
   hideRequiredMark: PropTypes.bool,
   autoFormCreate: PropTypes.func,
   options: PropTypes.object,
+  selfUpdate: PropTypes.bool,
 };
 
 export const ValidationRule = {

components/form/FormItem.jsx

@@ -34,6 +34,7 @@ export const FormItemProps = {
   colon: PropTypes.bool,
   fieldDecoratorId: PropTypes.string,
   fieldDecoratorOptions: PropTypes.object,
+  selfUpdate: PropTypes.bool,
 };
 function comeFromSlot(vnodes = [], itemVnode) {
   let isSlot = false;
@@ -69,6 +70,11 @@ export default {
   data() {
     return { helpShow: false };
   },
+  computed: {
+    itemSelfUpdate() {
+      return !!(this.selfUpdate === undefined ? this.FormProps.selfUpdate : this.selfUpdate);
+    },
+  },
   created() {
     this.collectContext();
   },
@@ -448,7 +454,7 @@ export default {
         }
         const option = this.decoratorOption(vnode);
         if (option && option[0]) {
-          vnodes[i] = getFieldDecorator(option[0], option[1])(vnode);
+          vnodes[i] = getFieldDecorator(option[0], option[1], this)(vnode);
         }
       }
       return vnodes;
@@ -466,7 +472,7 @@ export default {
     let child = filterEmpty($slots.default || []);
     if (decoratorFormProps.form && fieldDecoratorId && child.length) {
       const getFieldDecorator = decoratorFormProps.form.getFieldDecorator;
-      child[0] = getFieldDecorator(fieldDecoratorId, fieldDecoratorOptions)(child[0]);
+      child[0] = getFieldDecorator(fieldDecoratorId, fieldDecoratorOptions, this)(child[0]);
       warning(
         !(child.length > 1),
         '`autoFormCreate` just `decorator` then first children. but you can use JSX to support multiple children',

components/form/index.zh-CN.md

@@ -7,6 +7,7 @@
 | form | 经 `Form.create()` 包装过的组件会自带 `this.form` 属性，如果使用template语法，可以使用this.$form.createForm(this, options) | object | 无 |
 | hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
 | layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
+| selfUpdate | 自定义字段更新逻辑，说明[见下](/components/form-cn/#selfUpdate)，需1.3.17版本以上 | boolean | false |
 
 ### 事件
 | 事件名称 | 说明 | 回调参数 |
@@ -174,6 +175,7 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
 | required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false |
 | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string |  |
 | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#Col) |  |
+| selfUpdate | 自定义字段更新逻辑，你可以通过 Form 的 selfUpdate 进行统一设置。当和 Form 同时设置时，以 Item 为准。 说明[见下](/components/form-cn/#selfUpdate) 需1.3.17版本以上 | boolean | false |
 
 ### 校验规则
 
@@ -194,3 +196,9 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
 更多高级用法可研究 [async-validator](https://github.com/yiminghe/async-validator)。
 
 
+### selfUpdate
+
+设置 `selfUpdate` 为 `true` 后，`Form` 通过增量方式更新，只更新被修改的字段。大部分场景下，你只需要编写代码即可。而在某些特定场景，例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都需要进行渲染。你可以通过修改 Form.Item 取消 selfUpdate，或者在 `change` / `onValuesChange` 回调中手动调用 `this.$forceUpdate()` 更新组件。[示例]()
+
+如果你并不精通 Vue，并不建议使用 selfUpdate，如果出现性能问题，可以尝试这把 Form 相关的业务独立到一个单独的组件中，减少组件渲染的消耗。
+

components/vc-form/src/createBaseForm.jsx

@@ -60,7 +60,7 @@ function createBaseForm(option = {}, mixins = []) {
         this.instances = {};
         this.cachedBind = {};
         this.clearedFieldMetaCache = {};
-
+        this.formItems = {};
         this.renderFields = {};
         this.domFields = {};
 
@@ -172,8 +172,9 @@ function createBaseForm(option = {}, mixins = []) {
           return cache[action].fn;
         },
 
-        getFieldDecorator(name, fieldOption) {
+        getFieldDecorator(name, fieldOption, formItem) {
           const { props, ...restProps } = this.getFieldProps(name, fieldOption);
+          this.formItems[name] = formItem;
           return fieldElem => {
             // We should put field in record if it is rendered
             this.renderFields[name] = true;
@@ -341,17 +342,26 @@ function createBaseForm(option = {}, mixins = []) {
         setFields(maybeNestedFields, callback) {
           const fields = this.fieldsStore.flattenRegisteredFields(maybeNestedFields);
           this.fieldsStore.setFields(fields);
+          const changedFields = Object.keys(fields).reduce(
+            (acc, name) => set(acc, name, this.fieldsStore.getField(name)),
+            {},
+          );
           if (onFieldsChange) {
-            const changedFields = Object.keys(fields).reduce(
-              (acc, name) => set(acc, name, this.fieldsStore.getField(name)),
-              {},
-            );
             onFieldsChange(this, changedFields, this.fieldsStore.getNestedAllFields());
           }
-          if (templateContext) {
-            templateContext.$forceUpdate();
-          } else {
-            this.$forceUpdate();
+          const formContext = templateContext || this;
+          let allUpdate = false;
+          Object.keys(changedFields).forEach(key => {
+            let formItem = this.formItems[key];
+            formItem = typeof formItem === 'function' ? formItem() : formItem;
+            if (formItem && formItem.itemSelfUpdate) {
+              formItem.$forceUpdate();
+            } else {
+              allUpdate = true;
+            }
+          });
+          if (allUpdate) {
+            formContext.$forceUpdate();
           }
           this.$nextTick(() => {
             callback && callback();