受控组件与非受控组件

React中受控组件和非受控组件有什么区别？

简单来说，受控组件的数据由 React 组件处理，而非受控组件的数据则由 DOM 本身处理。接下来，我们将从基础知识入手，通过一些直观的例子，更深入地探讨这个问题。

什么是受控元件和不受控元件？

表单元素在 React 组件中使用 HTML 渲染，数据在此组件中被访问和操作。当我们讨论非受控组件和受控组件时，这些术语特指表单处理和访问数据的方式。数据处理可以通过多种方式实现，但常见的是使用类型化元素（例如 `<form>`<input>和<textarea>`<select>`）或选中元素（例如 `<select>`）<checkbox>, <select>, <radiobutton>。

受控组件

正如我们之前提到的，受控组件使用 use 状态来处理更新后的数据。这相当于将输入表单元素的值设置为this.state.valueuse 状态。通过将这些元素的值设置为 use 状态，我们将表单的渲染和后续输入都控制封装到了同一个 React 组件中。换句话说，React 状态始终作为“真理之源”。当用户与表单交互时，handleChange 会在每次按键或交互时运行，从而更新 React 状态。

React 文档承认，编写受控组件可能会让人觉得很枯燥，因为你需要为数据可能发生变化的每种方式创建一个事件处理程序，同时还要将其包含在 React 组件的使用状态中。

不受控组件

关于非受控组件，需要记住的一点是，它之所以是非受控的，部分原因是其值由用户而非程序设置。因此，如果<input type="file" />未设置值，`input:` 将始终是非受控的。这将渲染 `for` 元素，其中表单元素的数据由 DOM 处理。这样，它的工作方式类似于传统的 HTML 代码。

由于不受控制的组件将其“真理来源”保存在 DOM 中，因此在使用不受控制的组件时，有时更容易集成 React 和非 React 代码。

太长不看

受控组件和非受控组件的主要区别在于它们处理值的方式。非受控组件通过 props 传递值，而受控组件则使用 state 在内部管理值。在大多数情况下，受控组件是代码中的最佳选择。