React受控组件与非受控组件

使用React有一段时间了，今天来说说React的受控组件与非受控组件，下面将会用一些示例来说明。

非受控组件

---

• 组件没有设置value （checked）时，就可以称之为非受控组件；
• 组件设置了defaultValue (defaultChecked)来表示组件的默认值，此时它只会被渲染一次，后续的渲染不起作用。

render() {
    return (<input type="text" defaultValue="Tom" />)
}

上面的代码中，input的值不随外部调用者的状态变化而变化，由自己的状态来管理值。

受控组件

---

在书写React组件的过程中，指定value或checked值，组件渲染出来的状态始终是给定的value值。下面的示例中，通过给input指定value，然后点击button, 输入框的值就会随着this.state.value的变化而变化，此时input受调用者控制。

handleOnClick = () => {
    this.setState({
        value: ++this.state.value
    })
}
render(){
    return (
    <div>
        <input type="text" value={this.state.value} />
        <button onClick={this.handleOnClick}></button>
    </div>
    )
}

总结

---

受控制组件与非受控组件的区别可以用一句简单的话概括：React组件根据其自身的值是否被调用者传递的props完全控制，控制则为受控组件，否则非受控组件。

PS: 如有建议或意见欢迎提出(^_^)v