前情提要：

HTML 表单元素天生就存在一些内部状态，比如 input、textarea 和 select 这些标签，它们会维持自己的内部状态，并且根据用户的输入去进行更新。但是在 React 中，这些可变状态一般保持在 state 中，然后通过 this.setState() 方法去进行更新。

你必须要知道：

因为 React 默认是单向数据流的处理方式。也就是说，我们可以动态绑定输入框的值在 state （组件的状态）当中，当数据发生改变时，我们必须手动监听输入框的 onChange 事件，在事件处理函数中手动通过 this.setState() 方法驱动视图的更新。【因为不存在指令的概念，所以 React 只支持数据的单向流动（绑定），不同于 Vue 的 v-model 指令可以自动实现表单数据的双向绑定。这个一定要清楚。】

注意：有时使用受控组件可能会非常繁琐，因为你要为数据可能发生的变化，对于每一种变化方式都要编写一个事件处理程序，并且通过一个组件来管理全部的状态。当将已经有的代码库转化为 React，或者将 React 应用程序与非 React 库集成的时候，这可能变得非常烦人。

应用场景：

由于非受控组件将真实数据保存在 DOM 中，因此在使用非受控组件时，更容易同时集成 React 和非 React 的代码。

如果你想快速而随性，这样可以减少代码量。否则，你应该使用受控组件。