何为受控组件(controlledcomponent) ？

“受控组件 (Controlled Component)” 是 React 中表单处理的一个核心概念。

定义

受控组件：指那些表单输入值由 React 组件的 state 控制的组件。

也就是说：

• 表单控件的 显示值（value） 来自组件的 state；

• 当用户输入时，通过 onChange 事件 更新 state；

• 组件的 state → 控件的值，形成了单向数据流。

通俗理解

你可以理解成：

React “接管”了输入框的值。
输入框的内容不再由浏览器自己管理，而是由 React 的 state 管理。

示例对比

受控组件

function Form() {
  const [name, setName] = React.useState('');

  const handleChange = (e) => setName(e.target.value);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('提交的名字是：' + name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={handleChange} />
      <button type="submit">提交</button>
    </form>
  );
}

• 输入框的值 value={name} 由 React 的 state 控制；

• 用户输入时触发 onChange 更新 state；

• React 永远知道输入框里是什么。

非受控组件（Uncontrolled Component）

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('提交的名字是：' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} />
      <button type="submit">提交</button>
    </form>
  );
}

• 表单的值由 DOM 自己维护；

• React 只是“读取”这个值；

• React 不知道实时的输入变化。

对比总结

对比项	受控组件	非受控组件
数据来源	React state	DOM 自身
取值方式	通过 state	通过 ref
监听变化	onChange 更新 state	不一定监听
适用场景	数据同步、校验、动态表单	简单场景、第三方库
优点	数据可控、便于校验	更接近原生
缺点	代码略多，需写 onChange	React 不知道值的变化

一句话总结

受控组件 = 表单输入受 React state 控制的组件。
React 的 state 是“唯一数据源”。