React中的受控组件和非受控组件都是针对于表单数据而言的。
受控组件:
表单数据由React组件的state管理
非受控组件:
表单数据由DOM节点处理,可以用ref来从DOM中获取表单数据
区别:
受控组件:
-
受控组件依赖于状态
-
受控组件的修改实时映射到状态值上,此时可以对输入的内容进行校验
-
受控组件只有继承React.Component才会有状态
-
受控组件必须要在表单上使用onChange来绑定对应的事件
非受控组件:
-
非受控组件不受状态控制
-
非受控组件获取数据就是相当于操作DOM,使用ref获取
-
非受控组件可以很容易和第三方组件结合,更容易同时继承React和非React代码
使用:
-
受控组件:一般用在需要动态设置初始值的情况
-
非受控组件:一般用于无任何动态初始值信息的情况