七.获取真实的DOM节点

时间 2019-11-11

标签获取真实 dom 节点栏目 HTML 繁體版

原文原文链接

组件并非真实的DOM节点。而是存在于内存之中的数据结构。叫作虚拟DOM(virtual DOM). 只有当它插入文档后，才会变成真实的DOM。html

根据React的设计。全部的DOM变更。都先在虚拟DOM下发生。而后在将实际发生变更的部分，反应在真实DOM上。这种算法叫DOMdiff.他能够极大的提升网页的性能表现。react

可是有时须要从组件获取真实 DOM 节点。这时要用到ref属性。算法

<!DOCTYPE html>
<html>
<head>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="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="Focus the text input" onClick={this.handleClick} />
            </div>
            )
        }
      })

      ReactDOM.render(
        <MyComponent />,
        document.getElementById("example")
        )
    </script>
</body>
</html>babel

上面代码中组件MyComponent 的子节点有个文本输入框，用于获取用户的输入。数据结构

这时就必须获取真实的DOM节点。虚拟节点是拿不到用户输入的。dom

为了作到这一点，文本输入框必须有个ref 属性。而后 this.refs[refName]就会返回这个真实DOM节点。函数

须要注意的是。因为 this.refs[refName]获取的是真实的DOM节点。因此必须等到虚拟DOM插入文档之后，才能使用这个属性，不然会报错。性能

上面代码中。经过为组件指定 Click事件的回调函数。确保了只有等到真实DOM发生Click事件以后才会读取this.refs[refName]属性this