最近在学习React的过程中遇到了一个问题，React怎么操作真实的DOM？

我们知道，React组件操作的DOM并不是真正的DOM，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。但是在某些场景下，不得不操作真实的DOM，这个时候，就用到了ref这个属性。
假设有一个按钮，当用户点击的时候自动获取input文本框的焦点，用ref属性就可以实现。
html 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>React demo</title>
  <!-- 引入react、react dom 的cdn文件  -->
  <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
  <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

js代码（请选择JSX语法）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus()
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="click me" onClick={this.handleClick} />
      </div>
    )
  }
})
ReactDOM.render(
  <MyComponent />,
  document.getElementById('app')
)

在这个例子中，用户在input文本框中输入内容，这时必须获取真实的DOM节点，而在React中，虚拟的DOM是 拿不到用户的输入的，为了做到这一点，React提供了ref属性，然后 this.refs.[refName]就会返回这个真实的 DOM 节点。对于上面的例子，就是this.refs.myTextInput，通过给this.refs.myTextInput添加focus事件来获取input文本框的焦点。

需要注意的是，由于 this.refs.myTextInput属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取this.refs.myTextInput属性。

参考：
阮一峰-React 入门实例教程