所谓非受控组件，就像传统的HTML表单那样，它记住了你输入的内容，之后你可以使用ref来获去你输入的内容，如下：
class Example extends Component {
handleInpurt = () => {
console.log(this.input.value)
}
render() {
return (
<div>
<input ref={words => this.input = words} type='text' />
<button onClick={this.handleInpurt}>submit</button>
</div>
)
}
}
换句话说，就是当你提交form后，你必须要通过相应的字段来'拉取'你需要的值，这是表单输入最简单的实现方法。不管是在学习react的过程中，还是在真正的开发中，有很多有效的例子可以使用他，但是他的功能并不那么强大。
而所谓受控组件，官网是这么描述的:
在 HTML 中，表单元素（如
<input>、<textarea>和<select>）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用setState()来更新。
我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
看下面的示例：
class Example extends Component{
state = {
username: '',
password: ''
}
handleSubmit = (event) => {
// 阻止表单提交
event.preventDefault()
const {username, password} = this.state
console.log(username)
console.log(password)
}
saveUserinfo = (dataType) => {
// 返回一个回调函数
return (event) => {
this.setState({[dataType]: event.target.value})
}
}
render(){
return (
<form action='https://xxxx.com' onSubmit={this.handleSubmit}>
username: <input onChange={this.saveUserinfo('username')} type='text' name='username'/>
password: <input onChange={this.saveUserinfo('password')} type='text' name='password' />
<button>登录</button>
</form>
)
}
}
用户的输入通过onChange事件存入state，提交按钮用于输出用户提交信息。
