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屬性僅此而已。