React源码阅读—React.createRef

ref的用法

在使用React的开发过程中，我们经常会需要获取挂载到网页上的DOM节点，为它绑定事件或者是获取它的值（value）。那么这个时候我们就需要用到ref了。

ref的用法有三种：

• 第一种是传入一个字符串：

<div ref="div"></div>

那么当节点渲染到页面上之后，通过this.ref.div就可以获取到这个节点对应的DOM对象了。

• 第二种方法是传入一个函数：

<div ref={(div)=>{this.div = div;}}></div>

节点渲染到页面上之后，其对应的DOM对象会作为参数传入到函数中，然后在函数体内将其保存在this.div中。

• 第三种方法是传入一个refObject：

...
constructor(props){
    super(props);
    this.refObj = React.createRef();
}

...
<div ref={this.refObj}></div>

当节点渲染到页面上之后，就可以通过this.refObj.current来获得DOM对象了。

源码

export function createRef(): RefObject {
  const refObject = {
    current: null,
  };
  if (__DEV__) {
    Object.seal(refObject);
  }
  return refObject;
}

createRef方法的代码非常的少，其实就是返回了一个对象，对象里面有一个current属性仅此而已。