reactjs學習（2）

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

#DOM diff算法詳見https://calendar.perfplanet.com/2013/diff/

當我們在某些時候想獲取到真實的DOM節點就需要用到ref屬性

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 節點。

需要注意的是，由於 this.refs.[refName] 屬性獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以後，才能使用這個屬性，否則會報錯。上面代碼中，通過爲組件指定 Click 事件的回調函數，確保了只有等到真實 DOM 發生 Click 事件之後，纔會讀取 this.refs.[refName] 屬性。

React 組件支持很多事件，除了 Click 事件以外，還有 KeyDown 、Copy、Scroll 等，完整的事件清單請查看官方文檔

https://facebook.github.io/react/docs/events.html#supported-events

文章乃參考、轉載其他博客所得，僅供自己學習作筆記使用！！！