受控组件和非受控组件

88 阅读1分钟

React中的受控组件和非受控组件都是针对于表单数据而言的。

受控组件:

表单数据由React组件的state管理

非受控组件:

表单数据由DOM节点处理,可以用ref来从DOM中获取表单数据

区别:

受控组件:

  • 受控组件依赖于状态

  • 受控组件的修改实时映射到状态值上,此时可以对输入的内容进行校验

  • 受控组件只有继承React.Component才会有状态

  • 受控组件必须要在表单上使用onChange来绑定对应的事件

非受控组件:

  • 非受控组件不受状态控制

  • 非受控组件获取数据就是相当于操作DOM,使用ref获取

  • 非受控组件可以很容易和第三方组件结合,更容易同时继承React和非React代码

使用:

  • 受控组件:一般用在需要动态设置初始值的情况

  • 非受控组件:一般用于无任何动态初始值信息的情况

参考文档:

www.cnblogs.com/coderz1/p/1…