React的受控组件和非受控组件的认识

受控组件

      所谓受控组件，就是组件中的状态是可以根据用户的输入，实时的进行改变，并且展示在界面上，常见的受控组件：<input/>、<select/>、<radio/>这些组件要根据用户输入的改变，而改变其中的属性值。

先来看一个例子：

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: ''};
        this.handleNameChange = this.handleNameChange.bind(this);
    }

    handleNameChange(event) {
        this.setState({ name: event.target.value });
    };

    render() {
        return (
            <div>
                <input type="text" value={this.state.name} onChange={this.handleNameChange}/>
            </div>
        );
    }
}
原理图：

• name开始为空字符串' '，
• 当用户输入'a'时，触发handleNameChange事件并且调用setState的方法，更新name的值，进而触发render函数，将name的新值'a'展示在界面中；
• 当用户继续输入'b'时，触发handleNameChange事件并且调用setState的方法，更新name的值，进而触发render函数，将name的新值'ab'展示在界面中；

非受控组件

  表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref从DOM获取表单值；

先来看一个例子：

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>
    );
  }
}