使用 useRef 来防止每次输入更改时重新渲染是个好主意吗？

Question

我加入了一个前端训练营，现在我必须创建一个注册表作为我第一个项目的一部分。我想利用最佳实践成为......你知道的......成为之后被录用的最好的学生之一。

注册表单有9个字段，包括selcet、textareas和常用输入。并且 AFAIK 在任何输入中的每次按键都会导致整个组件重新渲染，因为它会改变组件的状态。而且我认为它在性能方面并不好。

我是 React 的新手，但我认为如果我在文本区域和输入上使用 useRef 会更好，这样我就不会在每次按键时更改状态。 Textareas 期望其中包含大量文本。因此，例如键入 400 个符号将导致 400 次重新呈现。如果我需要任何输入数据验证或警告（我实际上不需要这个项目）我可以使用模糊事件或表单提交事件。

然后我想在单击“提交”按钮时发送表单数据。

这是个好主意吗？使用这么多 (9) 个 refs 不是一种不好的做法吗？将 useState 数据（例如 select）与 useRef 数据（用于文本区域）混合来创建一个表单数据对象是否也是一个好主意？或者最好只使用其中一个钩子（对所有表单字段使用 useRef 或 useState）？

P.S。我不能使用 useMemo，因为我们还没有在训练营中学习它。仅 useState 和 useRef.

Answer 1

您可以将 ref 与 formData 一起使用。

const handleSubmit = (event) => {
  event.preventDefault()
  const form = new FormData(formRef.current)
  const formFields = Object.fromEntries(form)

  Object.entries(formFields).forEach(([fieldName, value]) => // do something

  // get the value of email input field 
  form.get('email')
}

<form ref={formRef} onSubmit={handleSubmit}>
  <input type="text" name="email" />
  <button type="submit">Submit</submit>
</form>

这样您就不需要在每次触发 onChange 时都更新状态。在此处阅读有关 formData 的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/FormData

使用 useRef 来防止每次输入更改时重新渲染是个好主意吗？

Is it a good idea to use useRef to prevent rerendering on every input change?

reactjs