在 React 中，有哪些常用手段来管理和处理表单输入？

回答思路

1. 【回答框架 1】受控组件是主流方案，通过 state 绑定输入框 value 并在 onChange 中更新状态，实现表单数据与 UI 同步，可实时校验和格式化。
2. 【回答框架 2】非受控组件通过 ref 直接读取 DOM 值，适用于简单场景或需要集成非 React 代码时，但数据不受 React 管控。
3. 【回答框架 3】可使用 Formik、React Hook Form 等库简化表单状态、校验和提交逻辑，React Hook Form 基于 ref 减少重渲染，性能更好。
4. 【回答框架 4】unified state 管理，如使用 useState 或 useReducer 管理表单对象，配合校验函数和提交处理，保持逻辑集中。
5. 【关键点 1】受控组件通过 value 和 onChange 实现双向绑定，是 React 表单核心方式。
6. 【关键点 2】非受控组件使用 ref 获取值，适用于简单或外部集成场景。
7. 【关键点 3】常用库如 Formik 和 React Hook Form 提供校验和状态管理，提升开发效率。
8. 【易错点 1】只使用 onChange 不更新 state 会导致输入无法显示。
9. 【易错点 2】过度使用非受控组件可能导致与 React 状态管理不一致。
10. 【易错点 3】未正确设置 key 或初始值可能导致表单状态混乱。