ReactJS學習系列課程（React ref的使用）

標籤：插入   input   details   logs   virt   handle   dom   get   記憶體   

在我學習React的過程當中，總會被一些名詞搞得暈頭轉向，但是細想起來又非常簡單，比如react定義的這個refs，其實就是用於擷取dom的一種方式。

在React中組件並不是真實的 DOM 節點，而是存在於記憶體之中的一種資料結構，叫做虛擬 DOM （virtual DOM）。只有當它插入文檔以後，才會變成真實的 DOM 。根據 React 的設計，所有的 DOM 變動，都先在虛擬 DOM 上發生，然後再將實際發生變動的部分，反映在真實 DOM上，這種演算法叫做 DOM diff ，它可以極大提高網頁的效能表現。

var MyComponent = React.createClass({  handleClick: function() {    this.refs.myTextInput.focus();  },  render: function() {    return (      <div>        <input type="text" ref="myTextInput" />        <input type="button" value="Focus the text input" onClick={this.handleClick} />      </div>    );  }});ReactDOM.render(  <MyComponent />,  document.getElementById(‘example‘));

上面代碼中，組件 MyComponent 的子節點有一個文本輸入框，用於擷取使用者的輸入。這時就必須擷取真實的 DOM 節點，虛擬 DOM 是拿不到使用者輸入的。為了做到這一點，文本輸入框必須有一個 ref 屬性，然後 this.refs.[refName] 就會返回這個真實的 DOM 節點。

通過這個ref我們同樣可以擷取input的輸入值。就是這麼簡單。

但是使用過程中我們切記：由於 this.refs.[refName] 屬性擷取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以後，才能使用這個屬性，否則會報錯。上面代碼中，通過為組件指定 Click 事件的回呼函數，確保了只有等到真實 DOM 發生 Click 事件之後，才會讀取 this.refs.[refName] 屬性。

原文串連：http://blog.csdn.net/jiangbo_phd/article/details/51758148

ReactJS學習系列課程（React ref的使用）