今天，让我们谈谈React的基本知识：约束组件（ controlled component）非约束组件（ uncontrolled component），他们有什么区别？
在 在React中，组件负责控制和管理自己的状态。
如果HTML中的表单元素是（ input、 select、 textarea等。)添加到组件中。当用户与表单交互时，它涉及到表单数据的存储。组件根据表单数据的存储位置分为约东部组件和非约东部组件。
约束性组件（ controlled component）就是由 React控制的组件，也就是说，表单元素的数据存储在组件内部的状态下，表单的显示由组件决定。
如下所示， username不存储在DOM元素中，而是存储在组件状态中。每次更新 username时，需要调用 setstate更新状态；每次获得 username的值必须获得组件状态值。
class App extends Component {
///初始状态
constructor ( props ) {
super ( props )
this .state = {
username：“课前端网”
}
}
///检查结果
showResult ( ) {
///获取数据获取状态值
console. log ( this .state. username )
}
changeUsername (e) {
///获取原生方法
var value =e .target .value
///更新前，脏值检测可以进行
///更新状态
this .setState ( {
username:value
} )
}
//渲染组件
render( ) {
///返回虚拟DOM
return (
<div>
<p>
{/*输入框绑定va1ue*/}
<input type="text" onChange={ this.changeUsername .bind (this ) }
value= { this .state.username }/>
</p>
<p>
< button onClick={this.showResult.bind (this)}>查看结果</ button>
</p>
</div>
)
}
}
非约束组件（ uncontrolled component）它是指表单元素的数据由元素本身存储和处理，而不是通过 React组件。如何呈现表单取决于表单元素本身。
如下所示，表单的值不存储在组件状态中，而是存储在表单元素中。当需要修改表单数据时，可以直接输入表单。有时元素可以获得，然后手动修改它的值。获取表单数据时，首先获取表单元素，然后通过表单元素获取元素值。
注：为便于在组件中获取表单元素，通常为元素设置ref属性，并通过refs属性在组件内获取相应的DOM元素。
class App extends Component {
///检查结果
showResult ( ) {
//获取值
console. log（this. refs. username .value）
///修改值，修改元素本身的值
this.refs.username.value=“专业前端学习平台”
//渲染组件
render ( ) {
///返回虚拟DOM
return (
<div>
<p>
{/*非约束组件，通过表单元素 defaltvalue定义*/}
< input type="text" ref=" username" defaultvalue=“课前端网”/>
</p>
<p>
< button onClick={this. showResult.bind ( this ) }>查看结果</button>
</p>
</div>
)
}
}
虽然非约东性组件通常更容易实现，DOM元素可以通过refs直接获得，其值也可以获得，但是 React建议使用约束组件。主要原因是约东组件支持即时字段验证，允许有条件禁用/启用按钮、强制输入格式等。
