可控组件与不可控组件

1. 核心区别：值与state是否对应。
2. 可控组件的好处：

• 复合React数据流
• 数据在state中，修改跟使用更加方便，只需要对state进行修改，而不用对DOM操作

3. 示例

• 可控组件

      class ConstrolInput extends React.Component {
        constructor(props) {
          super(props);        
          this.state = {value: "Hello world"};

          this.handleSubmit = this.handleSubmit.bind(this);
          this.handleChange = this.handleChange.bind(this);
        }
        handleSubmit(event) {
          event.preventDefault(); 
          alert(this.state.value);
        }
        handleChange(event) {
          this.setSate({value: event.target.value});
        }
        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              <input defaultValue={this.state.value} onChange={this.handleChange} />
              <button type="submit">Alert</button>
            </form>
          );
        }
      }

• 不可控组件

      class UnconstrolInput extends React.Component {
        constructor(props) {
          super(props);
          this.handleSubmit = this.handleSubmit.bind(this);
        }

        handleSubmit(event) {
          event.preventDefault();
          var input = this.refs.input;
          alert(input.value);
        }

        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              <input defaultValue="Hello world" ref="input" />
              <button type="submit">Alert</button>
            </form>
          );
        }
      }

4. 不可控组件中间的数据的状态是未知的，只有在需要打印数据的时候才从DOM节点获取。而可控组件的数据变换会更新到state，也就是说状态的变换是一直保持同步的。
5. 相对来说可控组件更值得推荐使用，虽然代码量上比不可控组件多些。