受控组件和非受控组件

受控组件和非受控组件

受控组件基本概念 通过名称，我们可以猜测一下这两个词是什么意思：

受控组件：受我们控制的组件 非控组件：不受我们控制的组件

也就是我们对某个组件状态的掌控，它的值是否只能由用户设置，而不能通过代码控制。

非控组

我们知道，在 React 中定义了一个 input 输入框的话，它并没有类似于 Vue 里 v-model 的这种双向绑定功能。也就是说，我们并没有一个指令能够将数据和输入框结合起来，用户在输入框中输入内容，然后数据同步更新。

受控组件

在 HTML 的表单元素中，它们通常自己维护一套 state，并随着用户的输入自己进行 UI 上的更新，这种行为是不被我们程序所管控的。而如果将 React 里的 state 属性和表单元素的值建立依赖关系，再通过 onChange 事件与 setState()结合更新 state 属性，就能达到控制用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做受控组件