关于 Schema 的一些理解和疑问

[eeeyeee]

Schema 是 Formily 最核心的东西，@formily/json-schema 包提供了 Schema 类，用于解析 JSON Schema，也可以将 Schema 转为 Field。Schema 是一棵树，各节点组件内可以通过 useFieldSchema 获取 schema，可以通过 useField 获取 field。

我发现 schema 和 field 并不是同步的，比如：

const Hello = observer(() => {
  const field = useField();
  const schema = useFieldSchema();
  return (
    <div>
      <div>schema.title: {schema.title}</div>
      <div>field.title: {field.title}</div>
      <button
        onClick={() => {
          schema.title = uid();
        }}
      >
        更新 schema.title
      </button>
      <button
        onClick={() => {
          field.title = uid();
        }}
      >
        更新 field.title
      </button>
      <button
        onClick={() => {
          schema.title = uid();
          field.title = uid();
        }}
      >
        全部更新
      </button>
    </div>
  );
});

上面例子

• 更新 schema.title 组件并不会重新渲染
• 更新 field.title 组件会重新渲染，只更新 field.title 并不会同步更新 schema.title（指的界面输出）
• schema.title 和 field.title 同时更新，界面输出的 schema.title 和 field.title 都会有变化

因为 schema 不支持局部更新，全局更新，需要另辟蹊径，比如：

export default () => {
  const schema = useMemo(
    () =>
      new Schema({
        type: 'object',
        properties: {
          hello: {
            type: 'void',
            title: uid(),
            'x-component': 'Hello',
            properties: {},
          },
        },
      }),
    [],
  );

  const form = useMemo(
    () =>
      createForm({
        effects(form) {},
      }),
    [],
  );

  const [, refresh] = useState(uid());

  return (
    <FormProvider form={form}>
      <SchemaField schema={schema} />
      <button onClick={() => {
        const name = uid();
        schema.addProperty(name, {
          type: 'void',
          title: name,
          'x-component': 'Hello',
        });
        refresh(uid());
      }}>新增节点</button>
    </FormProvider>
  );
};

上面例子通过更新 useState 来重新渲染组件，这样新增的节点就插入进来了。

最近在自己折腾表单设计器，designable 的思路一时半会儿也没有看明白。我自己的理解，Formily 有一套 JSON Schema 用于支撑表单内各组件的动态渲染，这样的话，已有节点的 schema，更新 field 可以达到效果；新增和删除 property，需要全局自己 new 一个全局的 schema 来处理。比如上面例子的做法：

• 更新 schema 要通过 field 来处理，再同步更新当前节点的 schema。
• 新增节点，需要全局控制，自己再维护一套 schema，而且 schema 只能作用在全局，这样一来有两套 schema 和一套 field 需要处理，感觉非常麻烦。

不知道是不是自己折腾的思路不对，有没有什么好的思路建议呢？

最后，附上上面例子的完整代码

https://codesandbox.io/s/sad-golick-o1rxy

[janryWang]

schema不是observable的，所以引用修改是不会生效的，本身也不推荐引用修改schema，dn的思路是专门维护一颗独立的observable tree node结构，
单独基于tree node来渲染，只是提供了转换json schema的方法而已

[eeeyeee]

import React from 'react';
import { createForm } from '@formily/core';
import { FormProvider, Field, observer } from '@formily/react';
import { Input, Form } from 'antd';
import { observable } from '@formily/reactive';
import { uid } from '@formily/shared';

const form = createForm();

const schema = observable({
  label: uid(),
});

export default observer(() => {
  return (
    <FormProvider form={form}>
      {schema.label}
      <Field
        name="input"
        decorator={[Form.Item, { label: schema.label }]}
        component={[Input]}
      />
      <button
        onClick={() => {
          const label = uid();
          schema.label = label; // Form.Item label 并不会有变化
        }}
      >
        更新 schema
      </button>
      <button
        onClick={() => {
          const label = uid();
          form.query('input').take(field => {
            field.decoratorProps['label'] = label;
            schema.label = label; // 同步修改 schema
          });
        }}
      >
        更新 field
      </button>
    </FormProvider>
  );
});

补充了一个例子，如果要修改 Form.Item 的 label 是否意味着只能通过 field 相关 api 来修改？如果要保持 schema 同步，就要自己封装来处理这个同步问题，不知道这个做法是否准确？

[janryWang]

说的没问题

[eeeyeee]

上面的做法感觉有点麻烦，有没有什么办法只改一套 api，而不是通过上面同步这种方式来维护 schema 呢？

[janryWang]

没有，本身也不推荐这么玩

[eeeyeee]

dn的思路是专门维护一颗独立的observable tree node结构

不是很理解这里的思路，粗略的看了源码，dn 的 SettingsForm 修改的是 node.props，DesignableField 里 schema toFieldProps 好像就可以了，并没有像我上面例子要去通过 field 的 api 修改 schema

[eeeyeee]

@janryWang
从 designable 的 ComponentTreeWidget 部分获取了灵感，简单的弄了个 demo，发现例子这样写是可行的，并不需要像上面那样从 field api 更新 schema。

https://codesandbox.io/s/dawn-bird-jg2se?file=/App.tsx

[janryWang]

Form的designable模式是有副作用的，第一，联动会失效，第二，校验会失效，所以dn在画布侧是禁用了组件的所有输入操作

[StringKe]

@eeeyeee 目前你有更好的方案了么？我也是将 json schema传递个 Schema class 然后调度 toFieldProps 发现 Field 组件并不会正确的响应