约束性组件和非约束性组件

在上一篇写到模拟实现数据双向绑定的时候，使用到input的value属性，并通过onChange事件来监听这个属性值的变化，但是当我们使用了value属性却没有监听改变事件的时候，就会报错。

在警告信息中提醒我们使用defaultValue，因此，当把value换成defaultValue时，就不会报错了。

那么这个value和defaultValue有什么区别呢，这就是今天要总结的约束性组件和非约束性组件。

所谓的非约束性组件，就是在<input type="text" defaultValue="a" /> 中，这个 defaultValue 其实就是原生DOM中的 value 属性。这样写出的来的组件，其value值就是用户输入的内容，React完全不管理输入的过程。

而约束性组件是指在<input value={this.state.username} type="text" onChange={this.handleUsername} />中，value属性不再是一个写死的值，他是 this.state.username, this.state.username 是由 this.handleChange 负责管理的。这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后，由于 this.setState 导致了一次重新渲染。不过React会优化这个渲染过程。看上去有点类似双向数据绑定。

因此，我们可以根据自己的需要来决定是用defaultValue还是value了。

转载于:https://www.cnblogs.com/yuyujuan/p/10116901.html