[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。