「这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战」
React 非受控组件和受控组件
在React中组件可以分为非受控组件和受控组件。这里的受控主要是指组件的状态是否受到React的控制。
在HTML元素中，<input> , <textarea> , 和 <select> 这类表单元素会维持并保存自身状态在value属性中，并根据用户输入进行更新。在React中，可变的状态通常保存在组件的状态属性state中，并且只能用 setState() 方法来进行更新。
可能这样说还不是特别清楚，我们可以举一个具体的例子来说明，这是一个表单提交的例子。
一、非受控组件和受控组件
1.非受控组件
class Login extends React.Component {
handleSubmit = (event) => {
event.preventDefault() //阻止表单提交
const { username, password } = this
alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
用户名：<input ref={c => this.username = c} type="text" name="username" />
密码：<input ref={c => this.password = c} type="password" name="password" />
<button>登录</button>
</form>
)
}
}
通过实例可发现，在非受控组件中
- React本身并没有维护组件的状态（input元素的value值）
- 在需要获取值的时候，先通过ref获取组件（元素），再通过组件（元素）来获取相应的值。
- 整个过程体现的是一个随取随用。
2. 受控组件
class Login extends React.Component{
//初始化状态
state = {
username:'', //用户名
password:'' //密码
}
//保存用户名到状态中
saveUsername = (event)=>{
this.setState({username:event.target.value})
}
//保存密码到状态中
savePassword = (event)=>{
this.setState({password:event.target.value})
}
//表单提交的回调
handleSubmit = (event)=>{
event.preventDefault() //阻止表单提交
const {username,password} = this.state
alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名：<input onChange={this.saveUsername} type="text" name="username"/>
密码：<input onChange={this.savePassword} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
通过实例可发现，在受控组件中
- React通过state属性来维护组件的状态，input属性的值会维护到state属性中。
- 因为组件的状态已经维护到state属性中，所以在获取相应数据的时候直接从state中读取就可以了，不必再获取对应的组件（元素）。
- 整个过程体现的是一个组件状态的维护和读取。
选择
非受控组件和受控组件都各有其优劣，需要具体情况据分析。相对来说，非受控组件实现比较简单，但比较依赖于ref,受控组件可以更好地维护数据流，但是实现比较复杂。在复杂的表单校验的场景中，受控组件的灵活性会好一点。
表格来源于文章：【React】知识点归纳：受控组件与非受控组件区别
| 特征 | 非受控制 | 受控 |
|---|---|---|
| 一次性检索（例如表单提交） | yes | yes |
| 及时验证 | no | yes |
| 有条件的禁用提交按钮 | no | yes |
| 执行输入格式 | no | yes |
| 一个数据的几个输入 | no | yes |
| 动态输入 | no | yes |
