在上一篇寫到模擬實現資料雙向繫結的時候，使用到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了。