在 React 开发中，非受控组件的定义是什么？通常适合在哪些场景下使用它？

回答思路

1. 【回答框架 1】非受控组件是指表单元素的状态由 DOM 自身维护，React 不通过 state 控制其值，而是通过 ref 在需要时获取真实 DOM 节点的值。与受控组件相反，非受控组件没有 value 与 onChange 的绑定关系，输入过程不触发 React 的重新渲染。
2. 【回答框架 2】获取非受控组件的值通常使用 React.createRef() 或 useRef 创建 ref 对象，并绑定到表单元素的 ref 属性，在事件处理或提交时通过 ref.current.value 来读取当前值。这也是它与受控组件最核心的差异。
3. 【回答框架 3】非受控组件适合用于表单字段较少、交互简单、不需要实时校验或联动场景，例如简单的登录表单、搜索框、文件上传等。在这些场景中使用非受控组件可以减少代码量，提高性能，因为不涉及频繁的状态更新。
4. 【回答框架 4】当需要根据输入值动态更新 UI、实时校验、条件禁用按钮或多个字段联动时，应当选择受控组件，因为它能保证数据源的唯一性。对于大多数业务表单，受控组件更可控、可预测，而非受控组件在兼容非 React 代码或需要集成第三方库时可能更便利。
5. 【回答框架 5】在实际项目中，可以在同一个表单中混用受控与非受控组件，例如大部分字段用受控方式管理，而个别频率低、逻辑简单的字段使用非受控方式，以达到开发效率和性能的平衡。
6. 【关键点 1】非受控组件通过 ref 获取表单值，状态由 DOM 维护。
7. 【关键点 2】非受控组件不触发 React 重新渲染，适合简单静态或少交互的表单。
8. 【关键点 3】需要实时校验、联动或动态 UI 时应使用受控组件。
9. 【关键点 4】受控组件和非受控组件可以按需混用，但需保持一致性。
10. 【易错点 1】常见误区是认为非受控组件完全无法获取值，实际上通过 ref 可以随时读取。
11. 【易错点 2】误用非受控组件在复杂表单中，可能导致数据不同步，难以维护。
12. 【易错点 3】官方文档推荐大多数场景使用受控组件，非受控组件仅在特定场景下使用。