受控组件和非受控组件的区别

[careteenL]

受控组件和非受控组件，是针对表单而言的。

受控组件

• 1. 可以通过在初始state中动态设置value值
• 2. 每当表单的值发生变化时，调用onChange事件处理器。如果添加了value （单选框和复选框对应的是checked）而没有添加onChange会受到react警告
• 3. 事件处理器通过合成事件对象e拿到改变后的状态，并更新state。
• 4. setState触发视图的重新渲染，完成表单组件值得更新

非受控组件

表现形式上，react中没有添加value属性（单选按钮和复选框对应的是checked）的表单组件元素就是非受控组件

• 1.非受控组件即不受状态的控制，获取数据就是相当于操作DOM。
• 2.非受控组件的好处是很容易和第三方组件结合。

[vkboo]

受控组件于非受控组件是针对表单元素来讲的，React是MVVM的库，数据(Model)的更新会通过ViewModel反映到视图(View)上，然而视图的更新并不会自动的映射到数据中，按照库默认的处理方式，则所有的表单就控件都是非受控组件，如果手动指定了表单元素的onChange事件，在事件函数中手动给相应的数据进行赋值，且这个值在绑定在表单的value/checked属性上，则这个表单元素就是受控组件。
简单的说受控于非受控的区别就是数据于视图之间是否互相绑定。按照React的思想来说，一般我们在进行表单处理的时候都需要把组件处理成受控的，这样在做复杂的表单校验、提交数据的获取都会方便很多.