React开发中，选择受控组件还是非受控组件是构建表单时的关键决策。两者各有优劣，理解其差异对高效开发至关重要。本文将深入探讨它们的定义、区别、优势以及各自的适用场景。
什么是受控组件？
在React中，受控组件是指其值由React组件状态管理的表单元素。这意味着组件状态存储当前值，并在用户交互时更新状态。
受控组件示例：
<code class="javascript">import React, { useState } from 'react';
const ControlledComponent = () => {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
alert(`提交的值: ${inputValue}`);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={inputValue} onChange={handleChange} />
<button type="submit">提交</button>
</form>
);
};
export default ControlledComponent;</code>
此例中，输入字段的值由inputValue状态控制。用户输入时，handleChange函数更新状态。
什么是非受控组件？
非受控组件则自行管理内部状态，不依赖React的状态管理机制，而是使用DOM处理表单数据。输入值不存储在组件状态中，但可通过ref访问。
非受控组件示例：
<code class="javascript">import React, { useRef } from 'react';
const UncontrolledComponent = () => {
const inputRef = useRef(null);
const handleSubmit = (event) => {
event.preventDefault();
alert(`提交的值: ${inputRef.current.value}`);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" ref={inputRef} />
<button type="submit">提交</button>
</form>
);
};
export default UncontrolledComponent;</code>
此例中，输入字段的值通过ref (inputRef) 直接从DOM获取。组件不维护输入值的自身状态。
何时使用哪种类型？
-
受控组件： 适用于需要根据用户输入管理复杂表单、实现验证或需要动态行为的场景。当需保持表单数据与组件状态同步时，也是首选。
-
非受控组件： 适用于简单表单，或希望快速原型而无需状态管理开销的场景。与不依赖React状态管理的库集成时也很有用。
结论
React中的受控组件由React状态控制表单元素的值，允许完全控制表单数据，便于实时管理、验证和操作输入值。但需要更多样板代码，大型表单时性能可能降低。
非受控组件则内部存储状态，仅在必要时（如表单提交）与之交互。它们易于实现，性能可能更好，尤其对于大型表单。但对表单数据的控制较少，动态验证或修改也更困难。
