受控组件与非受控组件

受控组件

所谓受控组件就是每当表单的状态发生变化时，都会被写入到组件的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.changeHandle.bind(this);
  }

  changeHandle(e){
    this.setState({
      inputState: e.target.value.toUpperCase()
    });
  }

  render(){
    const {inputState} = this.state;
    return (
      <div>
        <input type='text' value={inputState} onChange={this.changeHandle}></input>
      </div>
    )
  }
}

上述代码就是一个典型的受控组件。

在React中，数据是单向流动的，从上面代码中可以看出表单的数据源于组件的state，并通过props传入，这也称为单向数据绑定。然后，我们又通过onChange事件处理函数将新的表单数据写会到组件的state，完成了双向数据绑定。

同时，在setState之前，还对表单数据进行了转换成大写的操作。

非受控组件

如果一个表单组件没有value props（单选框和复选框对应的是checked prop）时，就可以称之为非受控组件。

例子

class Uncontrolled extends Component{
  constructor(props){
    super(props);
    
    this.changeHandle = this.changeHandle.bind(this);
  }

  changeHandle(e){
    const input = this.refs.input;
    input.value = e.target.value.toUpperCase();
  }

  render(){
    return (
      <div>
        <input type='text' ref='input' onChange={this.changeHandle} defaultValue="Shenzhen"></input>
      </div>
    )
  }
}

可以使用defaultValue或defaultChecked来表示组件的默认状态。

在React中，非受控组件是一种反模式，它的值不受组件自身的state或props控制。通常需要通过添加ref来访问渲染后的DOM元素。