在我们开始深入研究差异之前，请检查与之相关的基本面。
受控组件
当通过组件状态处理表单状态时，称为受控组件。在大多数情况下，这是继续前进的理想方式。甚至官方文档也建议这样做。当前值通过“道具”检索，然后通过回调进行更改。
不受控制的组件
与受控的相反，这是不受反应处理的组件。相反，这是由DOM本身处理的。为了访问已输入的任何值，我们使用“ refs”。
理解示例
1.USEREF（未受控制）
react.useref将允许您编写表单而无需重新渲染每个用户输入以实时控件为代价优化应用程序的组件，从而根据用户输入和预览启用/禁用表单提交按钮。 br>
export default function App() {
const inputElement = useRef();
const onInputSubmit=(e)=>{
e.preventDefault();
alert(`The name you entered was: ${inputElement.current.value}`)
}
return (
<div className="App">
<form onSubmit={onInputSubmit}>
<label>
Enter your name:
<input
type="text"
ref={inputElement}
/>
</label>
<button type="submit">Enter</button>
</form>
</div>
)
React没有国家管理。我们只需在输入元素中添加一个ref属性即可访问其值，inputElement.current.value。
2.使用（受控）
react.usestate将允许您重新渲染每个用户输入失去细长的组件，以使用实时控件构建更复杂的表单。
export default function App() {
const [name, setName] = useState("");
const onInputSubmit=(e)=>{
e.preventDefault();
alert(`The name you entered was: ${name}`)
}
return (
<div className="App">
<form onSubmit={onInputSubmit}>
<label>
Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<button type="submit">Enter</button>
</form>
</div>
)
我们可以看到React的Usestate Hook用于跟踪和处理输入值的更改。随着Onchange处理程序更新状态，姓名，每当用户更改输入时，都会控制输入组件。它的状态是输入价值真理的单一来源。
差异
-
两者都保留了在渲染和更新过程中的数据，但仅使用其更新功能会导致重新渲染。
-
USEREF具有当前的属性，可保留实际值，而Usestate返回两个元素的数组。首先，保持状态，第二个保留状态更新机功能。
-
只有useref才能在另一个申请领域中使用，以直接访问React组件或DOM元素。
-
useref的当前属性是可变的，但usestate的状态变量却不是。
-
另一个重要的区别是受控组件由父组件控制，而不受控制的组件由DOM控制。
参考