受控组件与非受控组件

受控组件

所谓受控组件就是每当表单的状态发生变化时，都会被写入到组件的state中，这种组件就被称为受控组件。

在受控组件中，组件渲染出的状态与它的value或checked prop相对应。React通过这种方式消除了组件的局部状态。

更新state的流程

1. 可以通过在初始state中设置表单的默认值
2. 每当表单的值发生变化，调用onChange事件处理器
3. 事件处理器通过合成事件对象拿到改变后的状态，并更新应用的state
4. setState触发视图的重新渲染，完成表单组件值得更新

每次表单值发生变化时，都会执行上述几步。这样统一了组件内部状态，使表单的状态更可靠。这也意味着，在执行最后一步setState之前，我们可以对值进行修饰。

例子

class Controlled extends Component{
   
  constructor(props){
   
    super(props);
    this.state = {
   
      inputState: ''
    }
    this.changeHandle = this