受控组件与非受控组件

受控组件与非受控组件

1. 受控组件
   在使用表单来收集用户输入时，例如<input>、<select>、<textarea>等元素都要绑定一个change事件，当表单状态发生变化时，就会触发onChange事件，更新组件的state。这种组件为受控组件，在受控组件中，组件渲染出的状态与它的value或checked属性相对应，react通过这种方法消息组件的局部状态，是整个状态可控。

受控组件更新state的流程：

• 可以通过初始state中设置表单的默认值
• 每当表单的值发生变化时，调用onChange事件处理器
• 事件处理器通过事件对象e拿到改变后的状态，并更新组件的state
• 一旦通过setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新

受控组件的缺陷：
表单元素的值都是由React组件进行管理，当有多个输入框，或者多个这种组件时，如果想同时获取到全部的值就必须每个都编写事件处理函数，这会让代码看起来很臃肿，所以为了解决这种情况，出现了非受控组件。

2. 非受控组件
   如果一个表单组件没有value或checked属性时，就是非受控组件。在非受控组件中，可以使用一个ref来获取DOM中的表单值，而不是为每个状态更新编写一个事件处理函数。

如下第一个<input>是一个非受控组件，它通过ref获取input输入框输入的值。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

页面中所有输入类的DOM如果是现用现取得称为非受控组件，而通过setState将输入的值维护到state中，需要时再从state获取，数据就受到了state得控制，这样的就是受控组件。