useState 或 useRef 用于表单提交

Question

通常，当我处理表单提交时，我使用useState输入值并将onChange事件设置为

const [inputValues, setInputValues] = useState({
    title: "",
    address: "init"
  });

  function submitHandler(e) {
    e.preventDefault();

    const meetupData = {
      meetupTitle: inputValues.title,
    };

    console.log(meetupData);
  }
  return (
    <form onSubmit={submitHandler}>
      <div>
        <label htmlFor="title">Meetup Title</label>
        <input
          type="text"
          required
          id="title"
          value={inputValues.title}
          onChange={(e) =>
            setInputValues({ ...inputValues, title: e.target.value })
          }
        />
      </div>
      <div>
        <button>Add Meetup</button>
      </div>
    </form>
  );

但在一些教程中我发现它是用useRefas编写的

const titleInputRef = useRef();

  function submitHandler(e) {
    e.preventDefault();
    const enteredTitle = titleInputRef.current.value;

    const meetupData = {
      title: enteredTitle,
    };

    console.log(meetupData);
  }
  return (
    <form onSubmit={submitHandler}>
      <div>
        <label htmlFor="title">Meetup Title</label>
        <input type="text" required id="title" ref={titleInputRef} />
      </div>
      <div>
        <button>Add Meetup</button>
      </div>
    </form>
  );

我试图了解有什么区别以及哪一个在总体性能上可能更好？

Answer 1

您可以根据情况使用基于状态的方法（又名受控组件）或基于引用的方法（又名非受控组件），尽管 React 建议大多数时候使用基于状态的方法。

这是两者之间的比较。

通过基于状态的方法，您可以获得在状态中存储某些内容时获得的所有好处：

• 如果将表单值保持在状态中，则可以在重新渲染期间更轻松地对它们的更改做出反应，例如，当另一个表单字段的值为空时禁用某些按钮。
• 您可以更轻松地将它们作为道具传递给其他组件。

然而，这些是基于状态的方法的缺点：

• 您需要输入更多代码

• 每次更改表单值时，您的组件都会重新渲染，因为您也在更改状态中的某些内容。