引言
最近在使用螞蟻金服出品的一條基於react的ant-design UI組件時遇到一個問題，編輯頁面時input輸入框會展示保存前的數據，但是是用defaultValue就是不起作用，輸入框始終為空值而不是具體的傳入的值。具體編輯頁面中文本框相關的代碼如下：
... //render方法上面的內容省略
<FormItem
label="問題描述："
hasFeedback
{...props.formItemLayout}
>
<Input type="textarea" defaultValue={props.value}/>
</FormItem>
//render下面的內容省略
...
在給代碼段所屬的組件傳遞value props后，文本框中的默認值一直為空，因為該頁面所在的狀態state中，value所對應的狀態初始值為空，導致后續異步請求成功后改變value對應的狀態中的值，仍然顯示為空。
google一下具體原因，原來React的form表單組件中的defaultValue一經傳遞值后，后續改變defaultValue都將不起作用，被忽略了。
具體來說這是一種react非受控組件，其狀態是在input的react內部控制，不受調用者控制。可以使用受控組件來實現。
下面就說說這個受控組件與非受控組件，它們都是基於react的form表單組件元素的，具體也可參考react官網這方面介紹
受控組件
就形式上來說，受控組件就是為某個form表單組件添加value屬性；非受控組件就是沒有添加value屬性的組件；，受控組件的形式如下形式：
render: function() {
return <input type="text" value="Hello!" />;
}
添加了value 屬性的表單組件元素其內部是不會維護自己狀態state，組件的value值一旦設置某個具體值就始終是這個值，所以需要調用者來控制組件value的改變。
這種寫法帶來一個問題：渲染后的input組件的用戶交互，用戶輸入的任何值將不起作用，input輸入框中的值始終為Hello!。這與HTML中input表現不一致。
為此，為了控制該組件，就需要能能夠控制input組件的值，需要借助其內部的狀態state，即組件內部要維護一個狀態state以便配合input組件的onChange和setState方法來完成對組件的控制；例如對上面形式可以進行封裝一個inputItem組件，其內部維護一個state狀態，具體代碼如下：
export default class InputItem extends React.Component{
constructor(props){
super(props);
this.state = {
value: ""
}
}
componentWillReceiveProps(nextProps){
this.setState({
value: nextProps.value
})
}
_onChange(evt){
this.setState({
value: evt.target.value
})
}
render(){
return (
<input type="text"
value={this.state.value}
onChange={this._onChange.bind(this)}/>
);
}
}
這樣就可以在外部像下面這樣調用InputItem組件了：
<InputItem value={this.state.userName} />
這樣就可以控制react的Input組件了，其實就是需要借助react的有狀態component來完成，因為有狀態component可以內部維護state。
非受控組件
表現形式上，react中沒有添加value屬性的表單組件元素就是非受控組件。表現形式如下：
<input type="text" />
非受控組件在底層實現時是在其內部維護了自己的狀態state；這樣表現出用戶輸入任何值都能反應到元素上。
總結
在使用react component時，都會遇到受控組件或者非受控組件；在目前，react組件推薦使用stateless component，但是使用該形式來實現react component時使用非受控組件到倒是沒有什么大問題，若是需要控制受控元素就會有出現問題，表現在：
`受控組件`需要主動維護一個內部state狀態的，而`stateless component`是無需維護組件的state狀態的，二者有沖突。
所以，受控元素就不能使用stateless component來創建。
鑒於受控組件與非受控組件的特點，二者應用的地方也有所不同，主要表現在：
-
受控元素，一般用在需要動態設置其初始值的情況；例如某些form表單信息編輯時，input表單元素需要初始顯示服務器返回的某個值然后進行編輯。
-
非受控元素， 一般用於無任何動態初始值信息的情況； 例如form表單創建信息時，input表單元素都沒有初始值，需要用戶輸入的情況
最后說明一下，本人才疏學淺，有什么不對的地方希望大家批評指正！！！