## 七、React.findDOMNode() 組件并不是真實的 DOM 節點，而是存在于內存之中的一種數據結構，叫做虛擬 DOM （virtual DOM）。只有當它插入文檔以后，才會變成真實的 DOM 。根據 React 的設計，所有的 DOM 變動，都先在虛擬 DOM 上發生，然后再將實際發生變動的部分，反映在真實 DOM上，這種算法叫做?[DOM diff](http://calendar.perfplanet.com/2013/diff/)?，它可以極大提高網頁的性能表現。 但是，有時需要從組件獲取真實 DOM 的節點，這時就要用到 React.findDOMNode 方法（查看?[demo07](https://github.com/ruanyf/react-demos/blob/master/demo07/index.html)?）。 > ~~~ > 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 的子節點有一個文本輸入框，用于獲取用戶的輸入。這時就必須獲取真實的 DOM 節點，虛擬 DOM 是拿不到用戶輸入的。為了做到這一點，文本輸入框必須有一個 ref 屬性，然后 this.refs.[refName] 就指向這個虛擬 DOM 的子節點，最后通過 React.findDOMNode 方法獲取真實 DOM 的節點。 需要注意的是，由于 React.findDOMNode 方法獲取的是真實 DOM ，所以必須等到虛擬 DOM 插入文檔以后，才能使用這個方法，否則會返回 null 。上面代碼中，通過為組件指定 Click 事件的回調函數，確保了只有等到真實 DOM 發生 Click 事件之后，才會調用 React.findDOMNode 方法。 React 組件支持很多事件，除了 Click 事件以外，還有 KeyDown 、Copy、Scroll 等，完整的事件清單請查看[官方文檔](http://facebook.github.io/react/docs/events.html#supported-events)。