React.findDOMNode()

七、React.findDOMNode()

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

但是，有時需要從組件獲取真實(shí) DOM 的節(jié)點(diǎn)，這時就要用到 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)有一個文本輸入框，用于獲取用戶的輸入。這時就必須獲取真實(shí)的 DOM 節(jié)點(diǎn)，虛擬 DOM 是拿不到用戶輸入的。為了做到這一點(diǎn)，文本輸入框必須有一個 ref 屬性，然后 this.refs.[refName] 就指向這個虛擬 DOM 的子節(jié)點(diǎn)，最后通過 React.findDOMNode 方法獲取真實(shí) DOM 的節(jié)點(diǎn)。

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

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