一切從需求出發，一切向功能看齊。我們討論一個東西的時候，首先要知道它是干什么？
例如一個登錄界面UI：
html和css寫好了，放到了render函數中：
需求是這樣的：想要獲取真實dom，在react中怎么實現呢？用什么要獲取真實的dom,因為react在render中
渲染的是虛擬dom(virtual DOM)。
有個需求需要處理用戶輸入的值：這時候我們就需要獲取真實的dom,怎么做呢？
給input加入一個ref屬性，<input ref="Dom" value="111"／> ,通過this.ref.dom就能獲取到這個input，this.ref.Dom.value就能獲取input中的值。
react中的input事件：onChange:當value發生改變時，觸發該事件。
需求輸入的手機號為這種格式：134 7326 0471 ,思路是在onChage事件中處理邏輯：
當輸入的長度為3，8的時候加入一個" "
輸入的情況：
var val = this.refs.Phone.value;
if ((val.length == 3 || val.length == 8) && (val.length > this.state.phoneValue.length)) {
val += " ";
}
還有可能是ctrl+v過來的信息：
if ((val.length >= 11) && (val.indexOf(' ') == -1)) {
val = val.split(' ').join('').slice(0, 3) + ' ' + val.split(' ').join('').slice(3, 7) + ' ' + val.split(' ').join('').slice(7)
}
控制一下輸入的長度：
if (val.length > 11) {
val = val.slice(0,11);
}
getInitialState() {
return({
phoneValue: '',
})
}
this.setState({
phoneValue: val
})
這樣我們就寫好了對輸入框的的value處理。
關鍵詞：ref virtual DOM