请解释 React 中受控组件与非受控组件的概念，并阐述它们之间的主要差异有哪些？
考察说明
考察对 React 表单处理中受控与非受控组件的理解及其差异。
回答思路
- 【回答框架 1】受控组件是指表单元素的值由 React 组件的 state 管理，并通过 onChange 事件更新 state，使表单数据完全由 React 控制。
- 【回答框架 2】非受控组件则是指表单元素的值存储在 DOM 自身中，通过 ref 来获取或操作值，React 不直接管理其状态。
- 【回答框架 3】两者的主要区别：受控组件的数据流是单向的（state -> value），每次变更都触发渲染，可预测性强；非受控组件则更接近传统 DOM 操作，代码量少但数据不可控。
- 【回答框架 4】在需要实时验证、联动或格式化输入时，受控组件更合适；在简单表单或需要与第三方 DOM 库集成时，非受控组件可能更方便。
- 【回答框架 5】选择标准：根据业务需求和对可控性的要求，受控组件提供更多控制力，非受控组件可能带来不必要的复杂性和性能开销。
- 【关键点 1】受控组件：值由 state 控制，通过 onChange 更新。
- 【关键点 2】非受控组件：值由 DOM 自身管理，通过 ref 获取。
- 【关键点 3】受控组件适合需要动态验证或联动的场景。
- 【关键点 4】非受控组件在简单场景下代码更简洁，但难以预测行为。
- 【易错点 1】误以为非受控组件不能设置默认值，其实可以通过 defaultValue 设置。
- 【易错点 2】受控组件若忘记 onChange 处理，会导致输入框无法编辑。
- 【易错点 3】在受控组件中直接操作 DOM 值可能导致状态不同步。