所谓非受控组件，就像传统的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，提交按钮用于输出用户提交信息。