来自React嵌套表单与Vue数据绑定的灵感

新的发布/订阅模式的多层级数据管理机制

  原先一直在用ant-design来开发React站点。但是最近来了一个样式自定义性比较强的项目，就进入ant-design的盲区了。普通显示组件都是顺手拈来，但是当我做到一个庞大的功能性页面时，就@#¥%~^了，我需要一个类似ant-design的Form的数据嵌套表单组件。
  在某 Du 和某 Ge 上搜了一顿，没发现特别健壮可用的（恕我孤陋寡闻），同时又研究了下rc-field-form，感觉在灵活性上还是差了一点。最终决定自己撸一份（一言不和就手撸），于是就有了一个新儿子@idler8/form-react。

什么是嵌套表单呢

• 在以前，我们做复杂表单是类似这样的(当然，以前没有 ReactHook)

  function FormPage() {
       
    const [fieldValue, setFieldValue] = useState("");
    const [fieldObjectValues, setFieldObjectValues] = useState({
       });
    return (
      <div>
        <input
          value={
       fieldValue}
          onChange={
       (e) => setFieldValue(e.target.value)}
        />
        <div>
          <div>这是一个嵌套表单</div>
          <div>
            <input
              value={
       fieldObjectValues.fieldObjectSubKey}
              onChange={
       (e) =>
                setFieldObjectValues({
       
                  ...fieldObjectValues,
                  fieldObjectSubKey: e.target.value,
                })
              }
            />
          </div>
        </div>
        <button
          onClick={
       () => {
       
            console.log({
       
              fieldKey: fieldValue,
              fieldObjectKey: fieldObjectValue,
            });
          }}
        >
          打印输出
        </button>
      </div>
    );
    // 咋一看没啥问题吧，但是如果fieldObjectValues下还有一级对象甚至更多呢？
  }
  

• 用了rc-field-form之后是这样的

  function FormPage() {
       
    const [form] = Form.useForm();
    return (
      <Form form={
       form}>
        <Form.Item name