约束组件和非约束组件

一、非约束性组件

针对<input>输入框这种类型，你可以通过这种方式来实现（其中defaultValue就是原生DOM中的value属性。

<input type="text" defaultValue="a" ref="input"/>

获取输入框的值的时候，需要这样做——即通过查询DOM，获取DOM属性的方式来做。

var input = this.refs.input 
console.log(input.value)

这样做，和jquery的做法一样，都是围绕着DOM来做的。缺点有两个：

• 依赖DOM操作，不符合组件化的设计，也不易扩展
• 查询DOM消耗更多性能。

二、约束性组件

比较推荐的方式是这一种。即监控<input>的变化，将值实时保存到state中，直接从state中获取值。

<input type="text" value={this.state.name} onChange={this.handleChange} /> 
 //...省略部分代码 
handleChange: function(e) { 
    this.setState({
        name: e.target.value
    });
}

<b>React或者Vue都是一种基于数据驱动视图的设计方式，定好数据和视图的规则之后，只更改数据，不直接操作DOM。操作DOM的事情，交给React或者Vue这个框架的代码来搞定。</b>