受控组件和非受控组件 React 受控组件（Controlled Components）： 受控组件是指组件内部的状态完全由React的state管理，用户输入的值立即反映到组件的state中。在受控组件中，表单元素（如<input>、<textarea>或<select>）的值不是直接由DOM本身管理，而是通过React组件的state进行控制。例如，<input>元素的值由value属性关联到组件的state变量，每次用户输入时，都会触发onChange事件，此时组件会根据事件处理函数更新state，进而更新value属性，始终保持DOM元素的值与state同步。
特点：
值由React组件控制，用户输入不会直接修改DOM元素的值。 必须提供onChange事件处理函数，以更新组件状态。 表单提交时，可以通过组件自身的state获取用户输入的最新数据。 优点：
提供了对用户输入行为的完全控制，方便在表单验证、实时反馈等方面做出快速反应。 状态管理集中，有利于组件间的协作和数据一致性。 缺点：
需要额外的代码来处理onChange事件和更新state，增加了开发复杂度。 不适用于某些不需要实时响应用户输入，或者希望由DOM自身处理的场景。 常用场景：
实现复杂的表单验证逻辑，需要实时获取并校验用户输入的表单。 用户输入内容需要与其他组件或数据源紧密联动，例如搜索框实时查询。 React 非受控组件（Uncontrolled Components）： 非受控组件则是指DOM元素的值由浏览器本身管理，不受React组件的state直接影响。在非受控组件中，表单元素的值是由DOM自身的defaultValue属性初始化，用户输入的改变并不会立刻同步到React组件的state中。获取非受控组件的值通常通过ref来访问DOM节点的value属性。
特点：
用户输入直接改变DOM元素的值，不依赖React组件的state。 不需要提供onChange事件处理函数来更新state。 获取当前值时，通常需要使用ref。 优点：
开发简单，更接近原生HTML表单的使用方式。 适用于只需要在表单提交时获取用户输入值的简单场景。 缺点：
无法实时跟踪表单值的变化，不利于实现即时验证或联动其他组件的功能。 多个组件共享数据时需要额外考虑数据同步问题。 常用场景：
简单的表单，仅在提交时才关心用户输入的值，而不关心输入过程。 需要保留浏览器默认行为，比如在文本框中粘贴内容时保持原有格式。 总结来说，受控组件适合于需要对用户输入实时响应和严格控制的场景，而非受控组件更适合于简单的表单处理，或者是需要利用原生DOM特性的场合。开发者应根据具体需求灵活选择合适的方式来处理表单输入。
