播面

在 React 中，受控组件（Controlled Component）和非受控组件（Uncontrolled Component）是描述表单元素如何与 React 状态交互的两种方式。

1. 受控组件（Controlled Component）

✅ 定义：

受控组件的表单数据由 React 组件的 state 控制，用户输入会触发事件处理函数更新 state，而输入框的值始终由 value prop 决定。

📌 特点：

• 表单元素的值由 state 驱动。
• 用户输入通过 onChange 等事件同步到 state。
• React 完全掌控输入值。

🧪 示例：

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

✅ 优点：

• 实时验证、条件禁用、格式化输入等逻辑容易实现。
• UI 与状态始终保持一致。
• 便于测试和控制复杂交互。

2.非受控组件（Uncontrolled Component）

✅定义：

非受控组件的表单数据由 DOM自身管理，React不通过state控制其值，而是通过 ref直接读取 DOM节点的值。

📌特点：

-使用 ref获取 input的值。
-初始值可用 defaultValue（仅首次有效）。
-Reacts不控制输入过程，只在需要时读取。

🧪示例：

import { useRef } from 'react';

function UncontrolledInput() {
const inputRef = useRef(null);

const handleSubmit = () => {
alert(inputRef.current.value);
};

return (
<input type="text" ref={inputRef} defaultValue="默认值" />
<button onClick={handleSubmit}>提交</button>
);
}

✅适用场景：

简单表单、集成非 React库、文件上传（input[type=file]必须用非受控）。

🆚对比总结：

💡选择建议：

-需要即时反馈/验证 → 用受控
-只需提交时读取值或集成第三方库 → 用非受控

两者并非互斥，可根据不同字段需求混合使用。