React中input的value属性一旦被设为非undefined/null值，组件即进入不可切换的受控模式，必须配对onChange和确定state值，否则触发警告或输入无响应。
React 中 input 的 value 属性一旦被设置（且不为 undefined 或 null），组件就进入受控模式；此时若未配对提供有效的 onChange 处理逻辑，或状态更新滞后/错误，就会立刻出现「输入无响应」「回退变只读」「初始值消失」等数据同步冲突。
为什么 value 属性一设就“卡住”？
React 在首次渲染时根据 value 属性决定组件类型：有 value（且非 undefined/null）→ 受控；没 value 或 value={undefined} → 非受控。这个判定只发生在挂载阶段，后续不能切换——强行混用会触发警告：A component is changing an uncontrolled input to be controlled 或 ...controlled to be uncontrolled。
- 受控组件的
value完全由 state 驱动，DOM 不保留独立状态；用户输入必须通过onChange触发setState，否则视图不会更新 - 非受控组件靠 DOM 自己记值，
defaultValue仅在挂载时生效；之后改defaultValue完全无效 - 常见误操作：异步加载数据后直接更新
valueprops，但初始渲染时value是undefined→ 先是非受控，再变成受控 → 冲突报错
如何避免受控/非受控切换警告？
核心原则：从挂载开始就明确组件类型，不中途变更。最稳妥的做法是统一使用受控模式，并确保 value 始终有确定值（哪怕空字符串）。
- 初始化 state 时不要留
undefined：const [value, setValue] = useState('')，而不是useState() - 如果依赖 props 初始化，用
useEffect同步，但别直接把 props 当作value绑定：value={value}，而不是value={props.value} - 服务端返回数据前，先给 input 一个占位值（如空字符串），避免从
undefined→ 字符串的切换 - 调试时检查控制台警告信息，定位是哪个
input触发了changing an uncontrolled input
受控组件里 setState 没生效的典型场景
不是 onChange 没写，而是状态更新逻辑出错，导致视图“看起来没反应”。这类问题往往静默发生，不报错但行为异常。
- 在事件处理器里用了旧 state 值做计算，比如：
setValue(e.target.value + oldSuffix)，但没用函数式更新，拿到的是上一轮的 state - 嵌套对象中更新深层字段时直接修改原对象（违反不可变原则），例如：
form.user.name = e.target.value，再setState(form)→ React 浅比较发现引用未变，跳过重渲染 - 使用了防抖或节流，但忘记在 cleanup 阶段取消 pending 的
setState，导致旧值覆盖新值 - 多个 input 共享同一个 state 字段，却没区分字段名，所有输入都写到同一个 key 上
非受控组件什么时候更合适？
它不是“次选”，而是适用场景明确：表单极简、无需实时校验、需要对接原生插件（如富文本编辑器）、或临时采集一次性值（如文件上传前的文件名预览）。
- 用
ref获取值，不要试图用useState去“模拟”受控逻辑 - 如果需要初始值，用
defaultValue，别用value - 注意：非受控组件无法通过 props 控制后续值，也不能用
value动态更新；想动态改值，只能操作 DOM（ref.current.value = 'xxx'），但这是绕过 React 的做法，需谨慎 - 混合使用时（比如一个表单里部分字段受控、部分非受控），确保它们的生命周期和数据流完全隔离，避免交叉影响
真正容易被忽略的点在于：React 对受控性的判断是静态且不可逆的，它不看你写了几个 setState，只看你第一次渲染时 value 是什么。很多“明明写了 onChange 却没反应”的问题，根源都在初始值那一行代码里。
