在 React 中，受控组件（Controlled Components） 和 非受控组件（Uncontrolled Components） 主要区别在于 表单数据的管理方式。
- 受控组件（Controlled Components）
表单元素的值受 React 组件状态（state）控制，必须通过 onChange 更新值。
✅ 推荐使用，因为数据流更可控，便于调试。
示例
import { useState } from ‘react’;
function ControlledInput() {
const [value, setValue] = useState(’’);
return (
<input
type=“text”
value={value} // 受 state 控制
onChange={(e) => setValue(e.target.value)} // 触发更新
/>
);
}
特点
✅ 值存储在 state 中，修改时必须通过 setValue 更新。
✅ 可控性强，可以进行数据校验、格式化、限制输入等操作。
✅ 适用于需要动态更新 UI 的场景（如实时校验、联动）。
- 非受控组件（Uncontrolled Components）
表单元素的值不受 React 组件状态控制，而是通过 ref 直接操作 DOM 获取值。
❌ 一般不推荐，除非特殊情况（如兼容第三方库）。
示例
import { useRef } from ‘react’;
function UncontrolledInput() {
const inputRef = useRef(null);
const handleSubmit = () => {
alert(inputRef.current?.value); // 直接从 DOM 获取值
};
return (
{/* 非受控 */}
提交
);
}
特点
✅ 适用于 需要和 非 React 代码交互 的情况，比如 第三方库、文件上传。
✅ 不会触发组件重新渲染，性能开销小。
❌ 不受 React 状态控制，不便于数据校验、格式化和调试。
- 何时用受控 vs. 非受控
最佳实践：
大多数情况下，使用受控组件，方便管理和调试。
如果不需要频繁更新 UI，或者要和原生/第三方库交互，使用非受控组件。
