受控或非受控组件

对比表格如下:

组件类型	受控组件 (Controlled)	非受控组件 (Uncontrolled)
定义	表单元素的值由 React state 管理	表单元素的值由 DOM 管理
状态管理	React 管理表单元素的状态（通过 state）	通过 `ref` 获取 DOM 元素的当前值
更新值	每次输入都会触发事件，更新组件的 state	直接操作 DOM 元素的值，不会触发组件重新渲染
表单验证	容易进行表单验证和实时更新	通过 `ref` 获取表单值，需要额外逻辑来进行验证
常见用途	需要实时响应和验证用户输入的表单，表单控件之间需要有依赖关系	简单的、不需要频繁更新状态的表单
代码复杂度	可能较为复杂，需要管理 state	相对简单，省去了管理 state 的复杂性
性能	每次更新都会重新渲染组件，可能对性能有影响	避免了频繁渲染，性能较好

react-hook-form是一个非常流行的 React 表单管理库，基于 React Hooks 实现，提供了简洁、高效、易于使用的表单管理功能。

react-hook-form 提供了以下优点：

• 低性能开销：它避免了频繁的 re-render。
• 易于集成：支持与各种 UI 库和自定义组件一起使用。
• 简单的 API：通过使用 React hooks，表单操作变得简单而直观。