React获得真实的DOM操作

时间：2021-11-10 23:15:49

真实的DOM操作

React获得真实的DOM操作

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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

我们来看一组案例

　　在代码中我们定义了一个组件 MyComponent   组件名字首字母必须大写 ， handleClick（）是点击事件，其中的ref

是用来绑定render（）输出的任何组件上。

组件  的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

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

React 除了 Click 事件以外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看官方文档。

<!DOCTYPE html>

<html>

  <head>

  		<meta charset='UTF-8'>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

  	<h1>获取真实DOM</h1>

  	<textarea style="width: 700px;height:500px;">

var MyComponent = React.createClass({

  handleClick: function() {

    this.refs.myTextInput.focus();

    //this.refs.myTextInput.value

    var example=document.getElementById('example');

    var test=document.getElementById('test');

    test.innerHTML=this.refs.myTextInput.value;

    example.appendChild(test)

  },

  render: function() {

    return (

      <div>{/*HTML中的注释需要加花括号才可以*/}

        <input type="text" ref="myTextInput" />{/*ref是用来绑定到render()输出到任何组件上*/}

        <input type="button" value="点击获得input框的value" onClick={this.handleClick} />

      </div>

    );

  }

});

ReactDOM.render(

  <MyComponent />,

  document.getElementById('example')

);

  	</textarea>

  	<h3>演示：</h3>

    <div id="example"></div>

    <div id="test"></div>

    <script type="text/babel">

var MyComponent = React.createClass({

  handleClick: function() {

    this.refs.myTextInput.focus();

    //this.refs.myTextInput.value

    var test=document.getElementById('test');

    test.innerHTML=this.refs.myTextInput.value;

  },

  render: function() {

    return (

      <div>

        <input type="text" ref="myTextInput" />{/*ref是用来绑定到render()输出到任何组件上*/}

        <input type="button" value="点击获得input框的value" onClick={this.handleClick} />

      </div>

    );

  }

});

ReactDOM.render(

  <MyComponent />,

  document.getElementById('example')

);

    </script>

  </body>

</html>

　　

相关文章