React学习之获取真实DOM节点

说明：本系列所有demo代码的github地址为：https://github.com/Brucewu998/react.js-learning，笔者会不断更新这些代码，本篇代码在目录下demo-04文件夹下。

在React中，组件并不是真实的DOM节点，而是一种存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

有时候，我们需要从组件中获取真实的DOM节点，这个时候可以用ref属性，下面来看一个demo:

在本例中，我们首先使用React.createRef创建了一个ref用于存储input的DOM，当我们需要访问这个标签的DOM时，可以直接使用this.textInput，然后根据原生API来访问相应的DOM节点进行相应的操作。运行效果：

上一篇：React学习之组件与props

下一篇： React学习之state与生命周期