今天我们聊聊一个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>
{/*非约束性组件中，表单元素通过 defaultvalue定义*/}
< input type="text"  ref=" username"  defaultvalue="有课前端网"/>
</p>
<p>
< button onClick={this. showResult.bind ( this ) }>查看结果</button>
</p>
</div>
 )
  }
}

虽然非约東性组件通常更容易实现，可以通过refs直接获取DOM元素，并获取其值，但是 React建议使用约束性组件。主要原因是，约東性组件支持即时字段验证，允许有条件地禁用/启用按钮，强制输入格式等。