React之受控组件与非受控组件

受控组件

当input的状态发生变化时，都会被组件写入到组件的state中，这种组件在React中被称为受阻控件。在受阻控件中，组件渲染出的状态与它的value相对应。
React通过这种方式消除了组件的局部状态，使得应用的整个状态更加可控。React受控组件更新state的流程：

1. 可以通过在初始state中设置表单的默认值
2. 每当表单的值发生变化时，调用onChange事件处理器
3. 事件处理器通过合成事件对象e拿到改变后的状态，并更新应用的state
4. 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

对比受控组件和非受控组件

1. 性能上的问题
   在受控组件中，每次表单的值发生变化时，都会调用一次onChange事件处理器，这确实会有一些性能上的消耗。虽然使用非受控组件不会出现这些问题，但仍然不提倡在React中使用非受控组件。这个问题可以通过Flux/Redux应用架构等方式来达到统一组件状态的目的。
2. 是否需要事件绑定
   使用非受控组件，我们需要为每个组件绑定一个change事件，并且定义一个事件处理器来同步表单值和组件的状态，这是一个必要条件。当然，在某些简单的情况下，也可以使用一个事件处理器来处理多个表单域。