真實的DOM操作
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
組件並不是真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫做虛擬 DOM （virtual DOM）。只有當它插入文檔以后，才會變成真實的 DOM 。根據 React 的設計，所有的 DOM 變動，都先在虛擬 DOM 上發生，然后再將實際發生變動的部分，反映在真實 DOM上，這種算法叫做 DOM diff ，
我們來看一組案例
在代碼中我們定義了一個組件 MyComponent 組件名字首字母必須大寫 ， handleClick（）是點擊事件，其中的ref
是用來綁定render（）輸出的任何組件上。
組件 的子節點有一個文本輸入框，用於獲取用戶的輸入。這時就必須獲取真實的 DOM 節點，虛擬 DOM 是拿不到用戶輸入的。為了做到這一點，文本輸入框必須有一個 ref 屬性，然后 this.refs.[refName] 就會返回這個真實的 DOM 節點。
需要注意的是，由於 this.refs.[refName] 屬性獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個屬性，否則會報錯。上面代碼中，通過為組件指定 Click 事件的回調函數，確保了只有等到真實 DOM 發生 Click 事件之后，才會讀取 this.refs.[refName] 屬性。
React 除了 Click 事件以外，還有 KeyDown 、Copy、Scroll 等，完整的事件清單請查看官方文檔。
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<h1>獲取真實DOM</h1>
<textarea style="width: 700px;height:500px;">
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
//this.refs.myTextInput.value
var example=document.getElementById('example');
var test=document.getElementById('test');
test.innerHTML=this.refs.myTextInput.value;
example.appendChild(test)
},
render: function() {
return (
<div>{/*HTML中的注釋需要加花括號才可以*/}
<input type="text" ref="myTextInput" />{/*ref是用來綁定到render()輸出到任何組件上*/}
<input type="button" value="點擊獲得input框的value" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
</textarea>
<h3>演示：</h3>
<div id="example"></div>
<div id="test"></div>
<script type="text/babel">
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
//this.refs.myTextInput.value
var test=document.getElementById('test');
test.innerHTML=this.refs.myTextInput.value;
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />{/*ref是用來綁定到render()輸出到任何組件上*/}
<input type="button" value="點擊獲得input框的value" onClick={this.handleClick} />
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
</script>
</body>
</html>