在我學習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] 屬性。