简析react中的ref

文章目录
  1. ref是什么
  2. ref字符串
  3. ref回调函数

ref是什么

ref是react的一种特殊属性,它可以被绑定到render输出的任何组件上去,作为这个组件的参考,原来render函数的组件返回的只是实例的描述而非真正的实例对象,绑定了ref之后你就得到相应组件的支撑实例,并且可以很方便地在代码的其它地方来访问这个实例对象。

ref字符串

当ref作为字符串来使用时,其形式如下:

1
<input ref="myInput" />

这时它的作用就相当于这个组件的一个标识,这时如果要想访问这个实例,可以通过this.refs来访问:

1
this.refs.myinput

ref回调函数

ref属性也可以是一个回调函数而不是一个字符串,当作为回调函数时,其形式为:

1
2
3
4
5
6
7
8
9
10
render: function() {
return (
<TextInput
ref={function(input) {
if (input != null) {
input.focus();
}
}} />
);
},

此回调函数会在组件被挂载时立即执行,而组件本身将作为回调函数的参数,可以被引用或是调用组件内部的方法,其一个典型的应用就是上面代码中所实现的聚焦功能。值得注意的是,因为组件撤销或者变换是都将执行回调,而先前的ref参数值将变为null,所以为了避免内存泄漏使用if(input != null)作为判断条件。