首页 > 代码库 > 七.获取真实的DOM节点
七.获取真实的DOM节点
组件并不是真实的DOM节点。而是存在于内存之中的数据结构。叫做虚拟DOM(virtual DOM). 只有当它插入文档后，才会变成真实的DOM。
根据React的设计。所有的DOM变动。都先在虚拟DOM下发生。然后在将实际发生变动的部分，反应在真实DOM上。这种算法叫DOMdiff.他可以极大的提高网页的性能表现。
但是有时需要从组件获取真实 DOM 节点。这时要用到ref属性。
<!DOCTYPE html>
<html>
<head>
<script src="http://www.mamicode.com/js/react.js"></script>
<script src="http://www.mamicode.com/js/react-dom.js"></script>
<script src="http://www.mamicode.com/js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var MyComponent = React.createClass({
handleClick:function(){
this.refs.myTextInput.focus();
},
render:function(){
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="http://www.mamicode.com/Focus the text input" onClick={this.handleClick} />
</div>
)
}
})
ReactDOM.render(
<MyComponent />,
document.getElementById("example")
)
</script>
</body>
</html>
上面代码中 组件MyComponent 的子节点有个文本输入框，用于获取用户的输入。
这时就必须获取真实的DOM节点。虚拟节点是拿不到用户输入的。
为了做到这一点，文本输入框必须有个ref 属性。然后 this.refs[refName]就会返回这个真实DOM节点。
需要注意的是。由于 this.refs[refName]获取的是真实的DOM节点。所以必须等到虚拟DOM插入文档以后，才能使用这个属性，否则会报错。
上面代码中。通过为组件指定 Click事件的回调函数。确保了只有等到真实DOM发生Click事件之后才会读取this.refs[refName]属性
七.获取真实的DOM节点