受控组件
当input的状态发生变化时，都会被组件写入到组件的state中，这种组件在React中被称为受阻控件。在受阻控件中，组件渲染出的状态与它的value相对应。
React通过这种方式消除了组件的局部状态，使得应用的整个状态更加可控。React受控组件更新state的流程：
- 可以通过在初始state中设置表单的默认值
- 每当表单的值发生变化时，调用onChange事件处理器
- 事件处理器通过合成事件对象e拿到改变后的状态，并更新应用的state
- setState触发视图的重新渲染，完成表单组件值的更新
以下示例，每当往input框中输入内容，input的value属性的值也会跟着相应的做出改变。
import React, {Component} from 'react';
class Counter extends Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
this.state = {
value: '',
}
}
handleClick(e) {
this.setState({
value: e.target.value
})
}
render() {
return (
<div>
<input value={this.state.value} onChange={this.handleClick}/>
</div>
)
}
}
export default Counter
非受控组件
如果一个表单组件没有value props时，就可以称为非受控组件，相应的，可以使用defaultValue和defaultChecked prop来表示组件的默认状态。
在react中，非受控组件是一种反模式，它的值不受组件自身的state或props控制。通常需要通过为其添加ref prop来访问渲染后的底层DOM元素。
import React, {Component} from 'react';
class Counter extends Component {
constructor(props) {
super(props)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleSubmit(e) {
e.preventDefault()
const { value } = this.refs.name
console.log(value)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input ref="name" type="text" defaultValue="shanghai"/>
<button type="submit">Submit</button>
</form>
)
}
}
export default Counter
对比受控组件和非受控组件
- 性能上的问题
在受控组件中，每次表单的值发生变化时，都会调用一次onChange事件处理器，这确实会有一些性能上的消耗。虽然使用非受控组件不会出现这些问题，但仍然不提倡在React中使用非受控组件。这个问题可以通过Flux/Redux应用架构等方式来达到统一组件状态的目的。 - 是否需要事件绑定
使用非受控组件，我们需要为每个组件绑定一个change事件，并且定义一个事件处理器来同步表单值和组件的状态，这是一个必要条件。当然，在某些简单的情况下，也可以使用一个事件处理器来处理多个表单域。
