React受控组件和非受控组件有什么区别？表单该怎么选？

一、核心机制：状态闭环与 DOM 自治

在原生 HTML 表单中，<input>、<textarea> 等元素天生自带内部状态：用户在输入框键入文字，浏览器负责存储并将文字绘制在屏幕上。进入 React 体系后，组件状态管理产生了两种截然不同的架构路径。

受控组件将原生表单项的内部状态剥离，将展示值绑定到 React 状态变量上（如 value={value}）。此时，如果用户键入新字符，浏览器并不会直接更新屏幕；用户敲击键盘产生输入事件后，必须通过 onChange 捕获目标元素的新值，通知 React 执行状态更新（setState），随后触发组件重新渲染，新值才真正通过 value 属性写回到输入框内。这种“数据流向视图，输入触发事件，事件修改数据，数据再次驱动视图”的过程，构成了经典的数据单向流闭环。

非受控组件则更贴近传统原生 HTML 的行为。React 仅在组件初次挂载时通过 defaultValue 为输入框赋予初始值。此后用户所有的打字、删除操作均由浏览器 DOM 内部自行维护，组件内部不会触发额外的渲染。当表单被提交时，开发者通过 ref.current.value 直接从 DOM 节点读取当前内容，或者借助原生的 new FormData(e.currentTarget) 统一收集全部键值。

二、代码范式：同一表单需求下的两套实现

通过一个典型的“用户注册”场景（包含用户名、密码验证及文件上传），可以清晰看到两种模式在编码层面的直观差异。

1. 受控组件的标准实现

在受控模式下，每一个表单元素都与一个 React 状态严格配对。这赋予了开发者对输入内容的毫秒级控制能力：

import React, { useState } from 'react';

export default function ControlledRegisterForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  // 实时派生计算：输入过程即时校验密码安全级别
  const isPasswordValid = password.length >= 8;
  const canSubmit = username.trim().length > 0 && isPasswordValid;

  const handleSubmit = (e) => {
    e.preventDefault();
    // 数据已在 state 中，无需访问 DOM 节点
    console.log('提交注册数据:', { username, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名：</label>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>

      <div>
        <label>密码：</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        {!isPasswordValid && password.length > 0 && (
          <span style={{ color: '#f87171' }}>密码长度不得少于 8 位</span>
        )}
      </div>

      <button type="submit" disabled={!canSubmit}>注册</button>
    </form>
  );
}

2. 非受控组件的标准实现

在非受控模式下，我们不需要为每个字段编写 useState 和 onChange，直接借助 useRef 或表单提交事件提取数据：

import React, { useRef } from 'react';

export default function UncontrolledRegisterForm() {
  const usernameRef = useRef(null);
  const avatarFileRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 在提交节点主动读取原生 DOM 属性
    const usernameValue = usernameRef.current.value;
    const selectedFile = avatarFileRef.current.files[0];

    console.log('收集表单数据:', { username: usernameValue, file: selectedFile });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名：</label>
        <input
          type="text"
          defaultValue="默认用户"
          ref={usernameRef}
        />
      </div>

      <div>
        <label>上传头像（文件输入项）：</label>
        <!-- 文件上传必须采用非受控方式 -->
        <input type="file" ref={avatarFileRef} />
      </div>

      <button type="submit">提交</button>
    </form>
  );
}

三、标准化重构：非受控向受控改造的四步流程

在项目迭代过程中，许多表单最初只是简单收集文本，随着产品需求增加（如要求根据手机号前三位自动匹配运营商、根据输入动态查重等），需要将非受控组件稳健重构为受控组件。推荐遵循以下四个标准操作步骤：

1. 第一步：声明并初始化受控状态。引入 useState，并分配一个符合语义的初值。例如文本输入框初始化为 ''，单选框/复选框初始化为布尔值或数组。
2. 第二步：接管展示属性（value 绑定）。将输入框的 defaultValue 移除，替换为 value={state}。此时输入框的渲染呈现已被 React 状态完全锁定。
3. 第三步：注入输入变更监听（onChange）。为输入框挂载 onChange 监听器，在回调中取出 e.target.value 并调用 setState，形成状态驱动闭环。
4. 第四步：接入派生计算与交互联动。利用已受控的响应式状态，编写输入过滤（如 replace(/\D/g, '') 移除非数字）、即时错误提示及提交按钮禁用条件。

四、表单场景技术选型决策指南

在面对具体业务需求时，表单方案的选型并不依赖个人偏好，而是取决于实际的交互需求和性能预算。

1. 什么时候坚决选择受控组件？

• 需要即时输入校验：用户一边打字，一边需要看到密码强度提示、手机号有效性标记，或者实时统计已输入的字符数（如 {text.length}/200）。
• 需要强制输入格式化或输入掩码：例如信用卡卡号每输入 4 位自动补空格，或者强制将小写字母实时转换为大写字母。只有受控组件能在值被写进 DOM 之前实施拦截和变形。
• 存在复杂的字段级联交互：例如在地址选择中，选择“广东省”后，城市下拉框需要根据省份状态立即切换可选项；或者勾选“已开具发票”复选框后，下方的发票抬头输入框才动态显示。
• 动态禁用提交动作：表单底部提交按钮的 disabled 状态需要根据当前所有输入项的合法性实时计算。

2. 什么时候果断选择非受控组件？

• 涉及本地文件上传：包含 <input type="file" /> 的表单字段。
• 极简提交型表单：如顶部全局搜索栏、简单的留言框、基础密码登录框。这些场景只需要在用户点击按钮或敲击回车时取一次值，无需在敲字过程中反复触发 React 重渲染。
• 超大规模表单的性能优化：当表单包含数十项甚至上百项输入字段（如 ERP 录入系统、复杂审批单），若全部采用受控组件，任何一个单元格的击键都会引起父级组件的大范围 re-render，容易产生明显的输入掉帧。采用非受控方式可以完全避免此类渲染开销。
• 集成非 React 的第三方 DOM 库：例如将复杂的富文本编辑器（Quill、TinyMCE）、拾色器或老旧 jQuery 插件封装进 React 时，非受控的 ref 模式是最稳定的边界桥梁。

五、高频踩坑点与避坑指南

1. 组件从非受控变为受控的警告（Uncontrolled to Controlled Warning）

在 React 控制台中，最常见的表单报错之一是：
Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value.

原因剖析：如果在声明状态时传入了 useState() 或 useState(undefined)，输入框初次渲染时接收到的 value 是 undefined，React 会将该组件当作“非受控组件”处理。随后，当异步数据加载完成或用户输入导致状态变更为具体字符串时，value 变成了有定义的值，React 就会抛出上述警告，指出组件在生命周期内非法突变了工作模式。

避坑解法：初始化状态时务必赋予空字符串或确切的保底默认值：

// 错误示范：初始为 undefined
const [query, setQuery] = useState();

// 正确做法：始终兜底为有效类型值
const [query, setQuery] = useState(initialData?.query ?? '');

2. 混淆 defaultValue 与 value

defaultValue 仅在组件初次挂载（Mount）到 DOM 树时生效一次，后续通过属性传递改变 defaultValue 不会引起输入框展示值的刷新。如果开发者想使用受控模式，必须绑定 value。反之，如果为输入框绑定了 value 却省略了 onChange，在非只读模式下输入框将被直接“锁死”，用户无法键入任何新字符。

3. 表单重置（Reset）的不同处理机制

在受控组件中，清空表单只需要显式重置所有的 state 变量（如 setUsername(''); setPassword('');），视图会自动跟随更新。而在非受控组件中，如果依赖原生 form，可以直接调用原生方法 e.currentTarget.reset() 或通过 formRef.current.reset() 一键清空所有原生控件。

六、全景速查矩阵与工业级方案建议

为便于团队在技术评审与日常开发中快速达成共识，下表对两种模式的核心技术维度进行了系统梳理：