ReactJS学习系列课程（React ref的使用）

2021-07-15 11:07

阅读：658

标签：插入 input details logs virt handle dom get 内存

在我学习React的过程当中，总会被一些名词搞得晕头转向，但是细想起来又非常简单，比如react定义的这个refs，其实就是用于获取dom的一种方式。

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

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      
        this.handleClick} />
      
    );
  }
});

ReactDOM.render(
  ,
  document.getElementById(‘example‘)
);

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

通过这个ref我们同样可以获取input的输入值。就是这么简单。

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

原文连接：http://blog.csdn.net/jiangbo_phd/article/details/51758148

ReactJS学习系列课程（React ref的使用）

标签：插入 input details logs virt handle dom get 内存

原文地址：http://www.cnblogs.com/taoshengyijiuai/p/7073400.html

上一篇：【图解】weblogic.management.ManagementException: [Deployer:149164]The domain edit lock is owned by

下一篇：jQuery实现全选反选功能

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：ReactJS学习系列课程（React ref的使用）
文章链接：http://soscw.com/index.php/essay/105550.html

亲，登录后才可以留言！

ReactJS学习系列课程（React ref的使用）

评论

热门文章

推荐文章

最新文章

置顶文章