ControlledComponent 与 UncontrolledComponent 之间的区 别是什么？

一句话解释：

• Controlled Component（受控组件）：由 React 的 state 完全控制其值。

• Uncontrolled Component（非受控组件）：由 DOM 自身维护状态（React 不直接管）。

受控组件（Controlled Component）

在受控组件中，表单数据由 React 组件的 state 管理。
组件内部不会存储值，值由 state 通过 value 属性传入。

例子：

function ControlledInput() {
  const [value, setValue] = React.useState("");

  return (
    <input
      value={value}              // 受控：由 state 控制
      onChange={(e) => setValue(e.target.value)} // 改变时更新 state
    />
  );
}

特点：

• 输入框值来自 state。

• 修改值必须通过 onChange 更新 state。

• 数据流是单向的（React → DOM）。

优点：

• 数据可控，便于验证、格式化、重置。

• 表单值变化完全可追踪。

缺点：

• 代码稍冗长。

• 每次输入都触发重新渲染。

非受控组件（Uncontrolled Component）

非受控组件的值不保存在 React 的 state 中，
而是直接由 DOM 元素自身维护（用 ref 取值）。

例子：

function UncontrolledInput() {
  const inputRef = React.useRef();

  const handleSubmit = () => {
    alert(inputRef.current.value);  // 直接从 DOM 取值
  };

  return (
    <>
      <input ref={inputRef} defaultValue="Hello" />
      <button onClick={handleSubmit}>提交</button>
    </>
  );
}

特点：

• 使用 defaultValue 初始化。

• 最终值通过 ref 获取。

• React 不会跟踪这个输入框的变化。

优点：

• 实现简单，代码少。

• 对性能友好（React 不追踪每次输入）。

缺点：

• 状态不透明，难以验证或同步。

• 不适合需要实时控制的表单。

总结对比

对比项	Controlled Component	Uncontrolled Component
值来源	React state	DOM 自身
获取值	state	ref
初始化	value	defaultValue
更新方式	onChange + setState	直接由用户输入
React 是否追踪	✅ 是	❌ 否
适用场景	复杂表单、校验、动态交互	简单表单或第三方库集成

建议

在实际开发中：

• 大部分情况下使用受控组件（便于调试、验证、同步）。

• 非受控组件 适合简单场景或对性能敏感的地方（如文件上传 <input type="file" />）。