[Web 前端] React高级教程(es6)——(2)对于Refs最新变动的理解

cp :  https://blog.csdn.net/liwusen/article/details/53384561

 

1.什么是ReactJS中的refs

在React中组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual

DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先

在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它

可以极大提高网页的性能表现。

如果我们想在虚拟DOM时(此时DOM还没有转化为真是DOM),取到某一个元素,此时不能通过

JS的getElementByXXX这种形式。

2.ReactJS前期的做法

前期在虚拟DOM阶段取元素,语法如下:

function Hello(){
    handleClick:function(){
       this.refs.myinput.fucus();
    }
    return <input ref="myinput" />
}

从上述我们可以知道可以通过refs.[refsName]来取得虚拟DOM中的元素。

3.ReactJS最新版本,对于refs的定义

关于refs的定义在最新版本中,并没有变化,但是使用语法有了很大的改变。

现在组件中的refs是一个回调函数。

这个函数,在组件生成期(mounted)

会自动执行,这个回调函数的参数是元素本身:

 

function Hello(){
   handleClick:function(){

   }
   return <input ref={(input)=>{this.myinput=input;}}/>
}

在这个例子中,ref的函数,传入了input元素本身,并且将this.myinput赋值为input元素本身。

在元素的销毁期(unmounted)也会执行,但是在销毁期,无论如何只会返回null。

    原文作者:demoblog
    原文地址: https://www.cnblogs.com/0616--ataozhijia/p/9189023.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞