javascript - 使用 React 生成大型动态表单，不会在每个输入上重新生成

Question

我正在将表单生成器从基于类的方法重写为基于函数的方法。然而，在这两种方法中我都遇到了同样的问题。该表单接收字段模板和值，循环字段规范，并呈现适当的输入。每个都被赋予了它的值和一个处理程序，用于在表单的状态对象中携带该值(稍后可以提交)。

当表单很小时，这可以很好地工作，但是当然这些表单并不小，并且可以变得非常大，并且其中包含许多类型的复杂字段。当表单字段规范增长时，表单的速度会减慢到按键和可见输入之间存在延迟的程度。有趣的是，这种延迟在开发过程中非常明显，但在编译为生产版本时要好得多。

我想尽可能少地渲染表单元素，并防止每次按下按键时整个表单的构建。但是，如果我预先生成字段，事件处理程序不会保留修改后的值。如果我在每次渲染时重建它 - 它只会减慢速度。

这里有一个简化的示例:

https://codesandbox.io/s/black-meadow-wqmzt

请注意，此示例首先将表单内容预呈现为状态，然后再呈现。但是，您可以更改 render s 返回行(在 main.js 中)来自:

return <div>{formContent}</div>;

到

return <div>{build()}</div>;

在每次渲染时重新构建表单。在这种情况下，您会注意到构建过程运行很多。

是否可以预呈现一组附加了事件处理程序的输入并保留事件处理程序的行为？

编辑:大型表单渲染的缓慢表现在输入中 - 例如，在文本字段中键入一些文本，在按键到渲染输入之间会出现延迟，因为每次按键都会触发表单的重建。

Answer 1

您可以仅使用本地状态[和处理程序]来强制项目更新/重新渲染。这当然会重复数据，但在这种情况下可能会有所帮助。

export default function Text({ spec, value, onChange }) {
  const [val, setVal] = useState(value);
  const handleChange = ev => {
    onChange(ev);
    setVal(ev.target.value);
  };

  return (
    <React.Fragment>
      <label>{spec.label}</label>
      <input type="text" name={spec.name} value={val} onChange={handleChange} />
    </React.Fragment>
  );
}

working example

顺便说一句 - 在从数组呈现的项目的外部元素上使用 key (而不仅仅是索引值):

  return (
    <div key={spec.name}>
      <FormElement
        spec={spec}
        value={values[spec.name] || ""}
        onChange={handleChange}
      />
    </div>