React 表单双雄：受控组件 vs 非受控组件，到底该怎么选？本文解析 React 受控与非受控组件，对比两者数据管理

一、核心概念：从表单数据管理说起

（一）受控组件：被 React「拿捏」的组件

受控组件的核心是由 React 状态（state）作为唯一数据源完全控制表单值 —— 就像你牵着一只听话的小狗，它的每一步移动都需要你的牵引：组件通过 value 属性让状态驱动 UI，通过 onChange 事件把用户输入同步到状态，形成 "状态→UI→状态" 的单向循环，保证 DOM 与状态始终同步。

// 受控组件示例：带实时验证的输入框
function ControlledInput() {
  const [value, setValue] = useState(''); // 状态是唯一数据源
  const [error, setError] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value); // 每次输入实时更新状态
    // 频繁触发：实时判断表单是否合格
    if (e.target.value.length < 6) {
      setError('输入内容不能小于6个字符');
    } else {
      setError('');
    }
  };

  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <label>受控组件</label>
      <input 
        type="text" 
        value={value}       // 绑定状态（数据源）
        onChange={handleChange}  // 输入时更新状态
        required
      />
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <button type="submit">提交</button>
    </form>
  );
}

（二）非受控组件：放飞自我的 DOM 原生派

非受控组件选择「相信 DOM」，数据直接存储在 DOM 节点中，React 通过ref在需要时「临时取用」。适合简单场景，比如你去快餐店直接拿现成的套餐，不需要每次都告诉厨房你要加什么料。

// 非受控组件示例：提交时获取值的表单
function UncontrolledInput() {
  const inputRef = useRef(null); // 给DOM贴个「门牌号」

  const handleSubmit = (e) => {
    e.preventDefault();
    // 直接从DOM拿值，就像从抽屉里翻东西
    const value = inputRef.current.value; 
    console.log('提交的值：', value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>非受控组件</label>
      <input 
        type="text" 
        ref={inputRef}        // 用ref关联DOM
        defaultValue="初始值" // 只设置初始值，后续不管
      />
      <button type="submit">提交</button>
    </form>
  );
}

二、深入对比：数据管理的两种哲学

（一）数据流向大不同

特性	受控组件	非受控组件
数据源	React 状态（state）	DOM 节点自身
更新方式	每次输入触发`onChange`更新状态	主动通过`ref`获取 DOM 值（如提交时）
初始值	使用`value`属性（需配合状态）	使用`defaultValue`（原生 HTML 风格）

（二）适用场景精准匹配

选受控组件？ 当你需要：
- 实时验证（如密码强度检查、邮箱格式校验）
- 动态联动（输入搜索词实时过滤列表）
- 复杂交互（多个输入框数据互相影响）
  举个栗子：用户注册表单需要实时提示「密码不能少于 8 位」，这时候受控组件就是你的最佳拍档。
选非受控组件？ 当你遇到：
- 简单表单（只在提交时需要数据，如登录表单）
- 性能敏感场景（减少状态更新带来的重渲染）
- 特殊表单元素（如<input type="file">只能用非受控）
  比如文件上传组件，浏览器限制file输入框的值不能通过代码修改，只能用ref获取用户选择的文件。

（三）优缺点大公开

受控组件优点：
- 数据严格可控，所有变化有迹可循（Debug 友好度 MAX）
- 适合复杂逻辑，比如支持撤销 / 重做的表单
- 完美契合 React 单向数据流理念
受控组件缺点：
- 代码量增加（每个输入框都要写状态和事件处理）
- 频繁更新可能导致性能瓶颈（大型表单需防抖优化）
非受控组件优点：
- 代码简洁，回归原生 DOM 操作思维
- 性能更佳（减少状态更新触发的重渲染）
- 方便与非 React 库集成（如老旧的 jQuery 插件）
非受控组件缺点：
- 数据难以追溯，容易出现「DOM 与预期不符」的情况
- 不支持实时交互，比如无法禁用不符合条件的提交按钮

三、实战避坑指南：细节决定成败

（一）受控组件必知细节

单选 / 多选框的特殊处理：

// 复选框的值是数组（选中状态）
<input 
  type="checkbox" 
  checked={isChecked} 
  onChange={(e) => setIsChecked(e.target.checked)} 
/>

// 单选框通过value匹配选中项
<input 
  type="radio" 
  value="male" 
  checked={gender === 'male'} 
  onChange={(e) => setGender(e.target.value)} 
/>

性能优化技巧：
- 对高频输入（如搜索框）使用防抖：
```
const handleChange = debounce((e) => {
  setValue(e.target.value);
}, 300); // 300ms内只更新一次，减少重渲染
```
- 用useCallback缓存事件处理函数，避免不必要的重渲染。

（二）非受控组件避坑要点

ref 的正确使用姿势：
- 函数组件用useRef，类组件用React.createRef()
- 获取值时确保ref.current存在（避免空指针错误）：
```
const value = inputRef.current?.value || ''; // 安全获取值
```
默认值不等于初始值：
- defaultValue只在组件挂载时生效，后续 DOM 修改不会同步到 React
- 如果你需要「可修改的初始值」，请用受控组件的value+ 初始化状态。

四、终极选择指南：场景决定一切

优先受控组件：只要涉及实时交互、数据验证、状态共享，选受控准没错。React 官方推荐的「单一数据源」原则，让你的组件更可预测、易维护。
非受控组件救场：
- 简单表单提交（如登录、搜索）
- 文件上传组件（<input type="file">的宿命）
- 兼容老旧代码（需要直接操作 DOM 的场景）
混合使用大法：复杂表单中可以部分受控 + 部分非受控，比如主输入框用受控做实时验证，辅助输入框用非受控简化代码。就像混搭穿衣，舒适又好看～

五、总结：找到你的表单最佳拍档

受控组件和非受控组件没有绝对的好坏，只有适合的场景。受控组件像严谨的管家，帮你把数据管理得井井有条；非受控组件像随性的朋友，在简单场景下让你快速上手。

下次遇到表单开发时，先问问自己：「我需要实时掌控每一次输入，还是只在最后关头拿结果？」想清楚这点，就能在 React 的表单世界里游刃有余啦～