受控组件与非受控组件的定义(官网定义)

• React的受控组件与非受控组件的概念是相对于表单而言的
• 在React中，表单元素通常会持有一下内部的state，因此，它的工作方式与其他HTML元素不一样，而获取表单元素内部state的实现方式的不同，就产生了受控组件和非受控组件

受控组件

前面提到，HTML的表单元素(如input、textarea、select等)在react中会维护内部的state；而react本身的数据也是由一个state来维护的，将这两者结合起来，react的state将表示该组件的值的变量的值传入表单内部，作为默认值，待表单内部有修改时，会通过setState同步到外界的state中。

如下面的例子，input表单的值由this.state.value传入，onchange绑定的方法经过setState修改，组件的数据流动都是通过State控制的，就是一个受控组件

handleChange(event) {  this.setState({value: event.target.value}) } // 已bind绑定

render() {
  return (
    <form onSubmit={Submit方法}>
      <label>
        名字:
        <input type="text" value={this.state.value} onChange={this.handleChange} />
      </label>
      <input type="submit" value="提交" />
    </form>
  )
}
复制代码

非受控组件

如果上例中的标的元素并不经过state，而是通过ref修改(或者直接操作DOM)，那么它的数据无法通过state控制，这就是非受控组件

consturctor(){
  this.inputValue = defaultValue
}

render() {
  return (
    <form onSubmit={Submit方法}>
      <label>
        名字:
        <input type="text" ref={value=>this.inputValue = value} />
      </label>
      <input type="submit" value="提交" />
    </form>
  )
}
复制代码

当然，在React 16.3 之后，react提供了一个更好的非受控组件的写法。

consturctor(){
  this.inputValue = React.createRef();
}

render() {
  return (
    <form onSubmit={Submit方法}>
      <label>
        名字:
        <input type="text" ref={this.inputValue} />
      </label>
      <input type="submit" value="提交" />
    </form>
  )
}
复制代码

总结

判断一个组件是不是受控组件，就要看这个表单组件它是否由react的state状态控制，它的值是否保存在this.state中，是否只能使用setState将修改后的值同步到初始变量。

简而言之，表单数据状态受React的state控制，通过setState修改的就是受控组件，通过DOM控制，不受state控制的就是非受控组件