受控组件与非受控组件
受控组件与非受控组件
受控组件
在使用表单来收集用户输入时，例如<input>、<select>、<textarea>等元素都要绑定一个change事件，当表单状态发生变化时，就会触发onChange事件，更新组件的state。这种组件为受控组件，在受控组件中，组件渲染出的状态与它的value或checked属性相对应，react通过这种方法消息组件的局部状态，是整个状态可控。
受控组件更新state的流程：
- 可以通过初始state中设置表单的默认值
- 每当表单的值发生变化时，调用onChange事件处理器
- 事件处理器通过事件对象e拿到改变后的状态，并更新组件的state
- 一旦通过setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新
受控组件的缺陷：
表单元素的值都是由React组件进行管理，当有多个输入框，或者多个这种组件时，如果想同时获取到全部的值就必须每个都编写事件处理函数，这会让代码看起来很臃肿，所以为了解决这种情况，出现了非受控组件。
非受控组件
如果一个表单组件没有value或checked属性时，就是非受控组件。在非受控组件中，可以使用一个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> ); } } 
