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

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。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值