這些組件在日常開發中並不起眼，我們可以通過輸入壹些內容或者設置元素的value屬性來輕松改變組件的值。但是，計算機培訓/發現由於React受單向數據流的約束，這些組件可能會失去控制:
1.將值保持在其自身狀態的組件不能從外部修改；
2.其值由props設置的組件只能由外部控件更新。
最近在使用螞蟻金服出品的壹個基於react的ant-designUI組件時，遇到了壹個問題。編輯頁面時，輸入的輸入框會顯示保存前的數據，但是使用defaultValue就是不行，輸入框永遠是null而不是具體傳入的值。
將valueprops傳遞給代碼片段所屬的組件後，文本框中的默認值始終為空，因為頁面所在的狀態中value對應的狀態的初始值為空，導致後續異步請求成功後value對應的狀態中的值發生變化，仍然顯示為空。
谷歌找出具體原因。壹旦React的表單組件中的defaultValue被傳遞，對defaultValue的後續更改將不起作用，並將被忽略。
具體來說，這是react的壹個不受控制的組件，它的狀態被控制在輸入的react內，不受調用者的控制。可以使用受控組件來實現。
先說這個受控組件和不受控組件。它們都是基於react的表單組件元素。具體可參考react官網介紹。
受控組件
從形式上來說，受控組件是給壹個表單組件添加壹個值屬性；非受控組件是沒有附加值屬性的組件；
添加了value屬性的表單組件元素不會維護自己的狀態，壹旦設置了特定的值，組件的值就會壹直是這個值，所以調用者需要控制組件值的變化。
這種書寫方式帶來壹個問題:用戶輸入的任何值在渲染的輸入組件的用戶交互中都不起作用，輸入輸入框中的值始終是Hello！。這與HTML中輸入的性能不壹致。
非受控組件
形式上，react中沒有添加value屬性的表單組件元素是不受控制的組件。
非受控組件在底層實現時保持自己的狀態state；這表明用戶輸入的任何值都可以反映在元素上。