react学习-8.获取真实DOM节点

React中的DOM也是虚拟DOM（virtual DOM），只有当它插入文档以后，才会变成真实的DOM。React也是在虚拟DOM发生变化时，进行比对后，只渲染变化的部分，它是React极高性能的主要原因之一。

但是有时候我们需要从组件中获取真实的DOM节点，React为我们提供了ref属性。下面我们通过一个demo了解Ref的用法。

image

这个案例很简单，就是有一个文本框，当你点击按钮时，光标定位到文本框里。这时就必须获取真实的DOM节点，虚拟DOM是拿不到input框的。
所以可以使用this.refs.要获取的dom名字。就可以返回真实的DOM。

class FoucsClick extends React.Component {
  constructor(props) {
    super(props)
  }
  handleClick(){
    this.refs.myFocusInput.focus();
  }
  render() {
      return (
        <div>
          <input type="text" ref="myFocusInput"/>
          <button onClick={this.handleClick.bind(this)}>点击获取焦点</button>
        </div>
      )
  }
}

ReactDOM.render( 
  <FoucsClick/>,
  document.getElementById('root')
);