七、React.findDOMNode()

組件并不是真實(shí)的 DOM 節(jié)點(diǎn)，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬 DOM （virtual DOM）。只有當(dāng)它插入文檔以后，才會(huì)變成真實(shí)的 DOM 。根據(jù) React 的設(shè)計(jì)，所有的 DOM 變動(dòng)，都先在虛擬 DOM 上發(fā)生，然后再將實(shí)際發(fā)生變動(dòng)的部分，反映在真實(shí) DOM上，這種算法叫做 DOM diff ，它可以極大提高網(wǎng)頁(yè)的性能表現(xiàn)。

但是，有時(shí)需要從組件獲取真實(shí) DOM 的節(jié)點(diǎn)，這時(shí)就要用到 React.findDOMNode 方法（查看 demo07 ）。

var MyComponent = React.createClass({
  handleClick: function() {
    React.findDOMNode(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>
    );
  }
});

React.render(
  <MyComponent />,
  document.getElementById('example')
);

上面代碼中，組件 MyComponent 的子節(jié)點(diǎn)有一個(gè)文本輸入框，用于獲取用戶(hù)的輸入。這時(shí)就必須獲取真實(shí)的 DOM 節(jié)點(diǎn)，虛擬 DOM 是拿不到用戶(hù)輸入的。為了做到這一點(diǎn)，文本輸入框必須有一個(gè) ref 屬性，然后 this.refs.[refName] 就指向這個(gè)虛擬 DOM 的子節(jié)點(diǎn)，最后通過(guò) React.findDOMNode 方法獲取真實(shí) DOM 的節(jié)點(diǎn)。

需要注意的是，由于 React.findDOMNode 方法獲取的是真實(shí) DOM ，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個(gè)方法，否則會(huì)返回 null 。上面代碼中，通過(guò)為組件指定 Click 事件的回調(diào)函數(shù)，確保了只有等到真實(shí) DOM 發(fā)生 Click 事件之后，才會(huì)調(diào)用 React.findDOMNode 方法。

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