通常，当我处理表单提交时，我使用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>
);
但在一些教程中，我发现它是用useRef作为编写的
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>
);
我正试图了解两者之间的区别，哪一个在总体表现上会更好？
根据情况，您可以使用基于状态的方法(也称为受控组件(或基于引用的方法(又名为非受控组件(，尽管react建议大多数时候使用基于状态方法。
以下是两者之间的比较。
使用基于状态的方法，当您在状态中存储东西时，您可以获得所有好处：
- 如果保持表单值的状态，则可以在重新渲染期间更容易地对其更改做出反应，例如，当另一个表单字段的值为空时禁用某些按钮
- 您可以更容易地将它们作为道具传递给其他组件
然而，这些都是基于状态的方法的缺点：
-
您需要键入更多的代码
-
每次更改表单值时，组件都会重新渲染，因为您也在更改状态中的某些内容。
根据目的，如果使用useState，则会同时获得getter和setter(这会触发重新发布器立即更新值(，而如果使用useRef，则只会获得getter。
因此，如果使用useRef，则不需要设置value={state}，而useState需要。
一般来说，如果你想验证用户输入的值(例如onChange事件(，你必须使用useState，如果你只想在提交表单时获得值，你可以自由使用useRef。