react中value与defaultValue的区别

在日常开发的过程中，我们经常会使用input输入框，有时会需要使用value绑定数据，针对这一点，react提出了一个概念，分为了约束性组件和非约束性组件。

之前正常使用的时候我们只需要这样写：

在react中这样的写法会出现一个错误，提示你应该使用onChange来监听这个input或者使用defaultValue来绑定数据。这样可以消除这个错误。

那么当使用defaultValue的时候：

这个时候就是一个非约束性组件，其实就是原生DOM中的value属性，这样写出来的组件，其value值就是用户输入的内容，和react没有关系，完全不管输入的过程。

当使用onChange的时候：

这个时候就是一个约束性组件，这里value不再是写死的值，他是你所绑定的数据，绑定的数据是由this.handleChange负责管理的。这个时候实际上input的value根本不是用户输入的内容。而是onChange事件触发之后，由this.state导致了一次重新渲染，不过react会优化这个过程。

总结：

1. 如果在使用input时只需要获取model里的值时，使用defaultValue就可以了。
2. 如果需要获取model的值并且还需要改变它的时候，就需要使用value结合onChange事件就可以了。