在 Schema 模式下，提供一个 x-inject-run 字段，值为函数，允许在 ReactiveField 组件中进行注入运行

[MeetzhDing]

在 JSX 开发模式中，用户可以随意插入自定义的逻辑，如注册字段生命周期事件，绑定外部数据源等。
但在 Schema 开发模式中，想要注册一段运行时执行逻辑，却不容易做到。

真实场景：

1. 将外部数据源同步到特定Field中。
   存量业务逻辑/全局性非表单数据，当数据更新时希望影响表单值。

2. 在Schema模式下，允许注册 Form/Field 的其他响应事件，如 onFieldMount。

实现思路：

在 Schema 中提供一个 x-inject-run 字段，值为函数，接受参数为 Field。

1. 在 Vue 中，将在 ReactiveField setup 函数中执行

  setup(props: IReactiveFieldProps, { slots }) {
    const formRef = useForm()
    const parentRef = useField()
    const optionsRef = inject(SchemaOptionsSymbol, ref(null))
    let createField = () =>
      formRef?.value?.[`create${props.fieldType}`]?.({
        ...props.fieldProps,
        basePath: props.fieldProps?.basePath ?? parentRef.value?.address,
      })

    if (isVue2) {
      createField = createFieldInVue2(createField)
    }

    const fieldRef = shallowRef(createField()) as Ref<GeneralField>
    watch(
      () => props.fieldProps,
      () => (fieldRef.value = createField())
    )
    useAttach(fieldRef)
    provide(FieldSymbol, fieldRef)

    // new code here
    const injectRun = fieldSchemaRef.value['x-inject-run'];
    injectRun?.()

2. 在React中, 将在 ReactiveField 组件中执行

const ReactiveInternal: React.FC<IReactiveFieldProps> = (props) => {
  const components = useContext(SchemaComponentsContext)
  if (!props.field) {
    return <Fragment>{renderChildren(props.children)}</Fragment>
  }
  const field = props.field

  // new code here
  const schema = useFieldSchema()
  const injectRun = schema['x-inject-run'];
  injectRun?.()

x-inject-run 函数内容的可能性

在 Vue 中，可以使用 watchEffect watch 等 api
在 React 中，可以使用 useEffect 等 api
在 Vue/React 中，都可以使用以上内容来注册外部的数据源，如 redux / rxjs 的 subscribe 等。

一个具体的样例：
https://codesandbox.io/s/formily-vue-schema-x-inject-run-rfc-38z5xl?file=/src/App.vue

这里将相同的逻辑，同时写在了 x-inject-run 和 x-reactions 中，在 x-reactions 中，使用 autorun.memo 模拟了 x-inject-run 逻辑。但这不是一个好的实践，因为这依赖了 autorun.memo 的内部实现，且整体语法上更加繁琐。

<template>
  <section>
    <FormProvider :form="form">
      <SchemaField :schema="schema"> </SchemaField>
    </FormProvider>
  </section>
</template>


<script>
import { defineComponent, h, ref, watchEffect } from "vue-demi";
import { createForm, onFieldMount } from "@formily/core";
import { FormProvider, createSchemaField } from "@formily/vue";
import { autorun } from "@formily/reactive";

const sharedStore = ref(0);
setInterval(() => {
  sharedStore.value += 1;
}, 5000);

const { SchemaField } = createSchemaField({
  components: {},
});

export default {
  components: {
    FormProvider,
    SchemaField,
  },
  setup() {
    const schema = {
      type: "object",
      properties: {
        input: {
          type: "string",
          "x-component": defineComponent({
            props: ["value"],
            render() {
              return h("div", {}, [this.$props.value]);
            },
          }),
          "x-reactions": [
            (field) => {
              const value = field.value;
              const val = autorun.memo(() => {
                onFieldMount(field.address, () => {
                  console.log("field mount");
                });
                watchEffect(() => {
                  field.setValue(sharedStore.value);
                });
                console.log(`component setup running: `, new Date());
                return undefined;
              }, []);
              console.log(value, val);
            },
          ],
          "x-inject-run": (field) => {
            onFieldMount(field.address, () => {
              console.log("field mount");
            });
            watchEffect(() => {
              field.setValue(sharedStore.value);
            });
            console.log(`component setup running: `, new Date());
          },
        },
      },
    };

    return {
      form: createForm(),
      schema,
    };
  },
};
</script>

[MeetzhDing]

@janryWang 这个提议看看呢？实现起来不复杂，也可以对表单能力有一个较大的增强。

想要做到所有表单相关的业务数据，全都在 formily自身的 Reactive模型里面，还是有点困难的。