我们或许不需要 React 的 Form 组件

单向数据流, 状态管理至顶而下; 这样可以确保整个架构数据的同步, 加强项目的稳定性; 它满足以下 4 个特点:

1. 不阻断数据流
2. 时刻准备渲染
3. 没有单例组件
4. 隔离本地状态

标签原本就可以获取其内部的所有表单内容

// 子组件, form标签一样可以获取相应的输入
function PasswordInput(){
  return <div>
    <p>密码:</p>
    <input name="password" />
  </div>
}

function App() {
  const { current: formDatas } = React.useRef({});

  const handleOnChange = React.useCallback(event => {
    formDatas[event.target.name] = event.target.value;
  }, []);

  const handleOnSubmit = React.useCallback(event => {
    console.log('formDatas: ', formDatas);
    event.preventDefault();
  }, []);

  return (
    <form onChange={handleOnChange} onSubmit={handleOnSubmit}>
      <input name="username" />
      <PasswordInput />
      <button type="submit" />
    </form>
  );
}
复制代码

表单联动 \ 校验

现在我们在之前的基础上实现一个需求:

如果密码长度大于8, 将用户名和密码重置为默认值

我们通过 form, 将input的dom元素存储起来, 再在一些情况进行dom操作, 直接更新, 代码如下:

function App() {
  const { current: formDatas } = React.useRef({});
  const { current: formTargets } = React.useRef({});

  const handleOnChange = React.useCallback(event => {
    // 在input事件中, 我们将dom元素的值存储起来, 用于表单提交
    formDatas[event.target.name] = event.target.value;
    // 在input事件中, 我们将dom元素储存起来, 接下来根据条件修改value
    formTargets[event.target.name] = event.target;

    // 如果密码长度大于8, 将用户名和密码重置为默认值
    if (formTargets.password && formDatas.password.length > 8) {
      // 修改DOM元素的value, 更新视图
      formTargets.password.value = formTargets.password.defaultValue;
      // 如果存储过
      if (formTargets.username) {
        // 修改DOM元素的value, 更新视图
        formTargets.username.value = formTargets.username.defaultValue;
      }
    }
  }, []);

  const handleOnSubmit = React.useCallback(event => {
    console.log('formDatas: ', formDatas);
    event.preventDefault();
  }, []);

  return (
    <form onChange={handleOnChange} onSubmit={handleOnSubmit}>
      <input defaultValue="hello" name="username" />
      <input defaultValue="" name="password" />
      <button type="submit" />
    </form>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
复制代码

如上述代码, 我们很简单的实现了表单的联动, 因为直接操作 DOM, 所以整个组件并没有重新执行 render, 这种更新方案的性能是极佳的(HTML的极限).

在写 React 的时候我们都非常 忌讳 直接操作DOM, 这是因为, 如果我们操作了 DOM, 但是通过React对Node的Diff之后, 又进行更新, 可能会覆盖掉之前操作DOM的一些行为. 但是如果我们确保这些 DOM 并不是受控组件, 那么就不会发生以上情况.

它会有什么问题么? 当其他行为触发 React 重绘时, 这些标签内的值会被清空吗?

明显是不会的, 只要React的组件没有被销毁, 即便重绘, React也只是获取到 dom对象修改其属性:

function App() {
  const { current: formDatas } = React.useRef({});
  const { current: formTargets } = React.useRef({});
  const [value, setValue] = React.useState(10);

  // 我们这里每隔 500ms 自动更新, 并且重绘我们的输入框的字号
  React.useEffect(() => {
    setInterval(() => {
      setValue(v => v + 1);
    }, 300);
  }, []);

  const handleOnChange = React.useCallback(event => {
    formDatas[event.target.name] = event.target.value;
    formTargets[event.target.name] = event.target;

    if (formTargets.password && formDatas.password.length > 8) {
      formTargets.password.value = formTargets.password.defaultValue;
      if (formTargets.username) {
        formTargets.username.value = formTargets.username.defaultValue;
      }
    }
  }, []);

  const handleOnSubmit = React.useCallback(event => {
    console.log('formDatas: ', formDatas);
    event.preventDefault();
  }, []);

  return (
    <form onChange={handleOnChange} onSubmit={handleOnSubmit}>
      <p>{value}</p>
      <input defaultValue="hello" name="username" />
      {/* p 标签会一直被 setState 更新, 字号逐步增大, 我们输入的值并没有丢失 */}
      <input defaultValue="" name="password" style={{ fontSize: value }} />
      <button type="submit" />
    </form>
  );
}
复制代码

但是, 如果标签被销毁了, 非受控组件的值就不会被保存

以下例子, input输入了值之后, 被消耗再被重绘, 此时之前input的值已经丢失了

function App() {
  const { current: formDatas } = React.useRef({});
  const { current: formTargets } = React.useRef({});
  const [value, setValue] = React.useState(0);

  React.useEffect(() => {
    setInterval(() => {
      setValue(v => v + 1);
    }, 500);
  }, []);

  const handleOnChange = React.useCallback(event => {
    formDatas[event.target.name] = event.target.value;
    formTargets[event.target.name] = event.target;
  }, []);

  const handleOnSubmit = React.useCallback(event => {
    console.log('formDatas: ', formDatas);
    event.preventDefault();
  }, []);

  return (
    <form onChange={handleOnChange} onSubmit={handleOnSubmit}>
      {/* 如果 value 是 5 的整数倍, input 会被销毁, 已输入的值会丢失 */}
      {value % 5 !== 0 && <input name="username" />}
      {/* 我们可以使用 defaultValue 去读取历史的值, 让重绘时读取之前输入的值 */}
      {value % 5 !== 0 && <input defaultValue={formDatas.password} name="password" />}
      {/* 如果可能, 我们最好使用 display 代替条件渲染 */}
      <input name="code" style={{ display: value % 5 !== 0 ? 'block' : 'none' }} />
      <button type="submit" />
    </form>
  );
}
复制代码

如代码中的注释所述:

1. 如果 input 被销毁, 已输入的值会丢失
2. 我们可以使用 defaultValue 去读取历史的值, 让重绘时读取之前输入的
3. 如果可能, 我们最好使用 display 代替条件渲

好了, 我们在了解了直接操作DOM的优点和弊端之后, 我们继续实现表单常见的其他行为.

跨层级组件通信

根据条件执行某子组件的函数, 我们只需要获取该组件的ref即可, 但是如果涉及到多层级的组件, 这就会很麻烦.

传统 Form 组件会提供一个 FormItem, FormItem会获取 context, 从而提供跨多级组件的通信

而我们如何既然已经获取到dom了, 我们只需要在dom上捆绑事件, 就可以无痛的做到跨层级的通信. 这个行为完全违反我们平时编写React的思路和常规操作, 但是通过之前我们对 "标签销毁" 的理解, 通常可以使它在可控的范围内.

我们看看实现的代码案例:

// 此为子子组件
function SubInput() {
  const ref = React.useRef();

  React.useEffect(() => {
    if (ref.current) {
      // 在DOM元素上捆绑一个函数, 此函数可以执行此组件的上下文事件
      ref.current.saved = name => {
        console.log('do saved by: ', name);
      };
    }
  }, [ref]);

  return (
    <div>
      {/* 获取表单的DOM元素 */}
      <input ref={ref} name="sub-input" />
    </div>
  );
}

// 此为子组件, 仅引用了子子组件
function Input() {
  return (
    <div>
      <SubInput />
    </div>
  );
}

function App() {
  const { current: formDatas } = React.useRef({});
  const { current: formTargets } = React.useRef({});

  const handleOnChange = React.useCallback(event => {
    formDatas[event.target.name] = event.target.value;
    formTargets[event.target.name] = event.target;

    // 直接通过dom元素上的属性, 获取子子组件的事件
    event.target.saved && event.target.saved(event.target.name);
  }, []);

  const handleOnSubmit = React.useCallback(event => {
    console.log('formDatas: ', formDatas);
    event.preventDefault();
  }, []);

  return (
    <form onChange={handleOnChange} onSubmit={handleOnSubmit}>
      {/* 我们应用了某个子子组件, 并且没用传递任何 props, 也没有捆绑任何 context, 没有获取ref */}
      <Input />
    </form>
  );
}
复制代码

根据此例子我们可以看到, 使用 html 的 form 标签,就可以完成我们绝大部分的 Form 组件的场景, 而且开发效率和执行效率都更高.

争议

通过操作DOM, 我们可以很天然解决一些 React 非常棘手才能解决的问题. 诚然这有点像在刀尖上跳舞, 但是此文中给出了一些会遇到的问题及解决方案.

我非常欢迎对此类问题的讨论, 有哪些还会遇到的问题, 如果能清晰的将其原理及原因描述并回复到此文, 那是对所有阅读者的帮助.

写在最后

请不要被教条约束, 试试挑战它.