什么是React的受控组件和非受控组件？

在React里处理表单，你很快就会遇到这两个概念。它们指的是管理表单数据（比如input、textarea、select的值）的两种不同方式。选哪种，取决于你想要多少控制权。

受控组件：数据由React完全掌控

受控组件的意思是，表单元素的值完全由React的state驱动。你通过value属性把state的值赋给输入框，然后通过onChange事件处理器来更新state。这就形成了一个单向数据流：state -> 输入框的值 -> 用户输入触发onChange -> 更新state -> 重新渲染。

function ControlledForm() {
  const [inputValue, setInputValue] = useState('');
  const handleChange = (event) => {
    setInputValue(event.target.value);
  };
  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleChange}
    />
  );
}

在这里，输入框显示什么，完全取决于inputValue这个state。你想在用户输入时做点什么（比如实时验证、格式化），直接在handleChange函数里处理就行。这就是“受控”——React是数据的唯一来源，拥有绝对控制权。

非受控组件：让DOM自己管理数据

非受控组件更像传统的HTML表单。你不把value绑定到state，而是用ref去从DOM节点里“扒”出当前值。通常用defaultValue属性来设置初始值。

function UncontrolledForm() {
  const inputRef = useRef(null);
  const handleSubmit = () => {
    alert('输入的值是: ' + inputRef.current.value);
  };
  return (
    <>
      <input type="text" defaultValue="初始值" ref={inputRef} />
      <button onClick={handleSubmit}>提交</button>
    </>
  );
}

这里，输入框的值由DOM自己维护。你只在需要的时候（比如表单提交时）通过ref去读取它。React不干涉数据的更新过程，这就是“非受控”。

怎么选？看你的需求

选受控组件，通常是因为：

• 你需要对数据做即时验证或格式化（比如把输入转成大写）。
• 表单的提交行为依赖于当前值（比如一个禁用的提交按钮直到输入有效才启用）。
• 你有多个输入，它们的值需要根据彼此动态计算。

选非受控组件，通常是因为：

• 你只是需要一个简单的表单，提交时取一次值就行。
• 你正在集成非React的第三方库，需要直接操作DOM。
• 你希望性能极致优化（因为受控组件每次输入都会触发渲染，在超大型表单或复杂交互中可能是个考量）。

简单来说，受控组件更符合React“数据驱动UI”的哲学，控制力强，但代码稍多。非受控组件更简单直接，把脏活累活交给了DOM。现代React开发中，受控组件是更主流的选择，因为它让状态变得可预测。但知道非受控这回事儿，能在需要的时候给你多一个选择。