Refs

Refs提供了一種訪問 DOM節點或在 render方法中建立的 React元素的方法。

refs 是React組件中很是特殊的props，能夠附加在任何一個組件上。組件被調用時會新建一個該組件的實例，而refs就會指向這個實例。

在react\lib\ReactBaseClasses.js文件中，能夠看出每一個組件都存在refs屬性。

/**
 * Base class helpers for the updating state of a component.
 */
function ReactComponent(props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}

在React組件上添加refs

1.使用字符串的方式添加refs
格式：ref='string'

import React, { Component } from 'react';
import './App.css';
import ReactDOM from 'react-dom';

class Children extends Component {
  render() {
    return <div>
      子組件
    </div>
  }
}
class App extends Component {s

  render() {
    return (
      <div className="App">
          {/* 使用字符串方式 */}
        <Children ref='children' />
      </div>
    );
  }

  componentDidMount() {
    console.log(this);
    console.log('*******************************');
    console.log(this.refs.children);
  }
}

輸出結果：

refs 能夠是字符串，一樣能夠是回調函數。

2.使用 回調函數 的方式添加refs
render方法修改以下：

render() {
    return (
      <div className="App">
          {/* 使用字符串方式 */}
        {/* <Children ref='childern' /> */}
        {/* 使用回調函數方式 */}
        <Children ref={ref=>this.childrenRef=ref} />
      </div>
    );
  }

想要獲取當前React組件的實例（引用）能夠使用this，獲取所擁有子組件的實例（引用）能夠使用refs。

在React組件上添加refs，獲取到的是組件的實例。而若是在原生的Dom組件上添加refs獲取到的事什麼呢？接着看

在DOM元素上添加refs

class App extends Component {

  constructor(props){
    super(props);
  }

  render() {
    return (
      <div className="App">
        <input type='text' ref='input'/>
      </div>
    );
  }

  componentDidMount() {
    console.log(this);
    console.log('*******************************');
    console.log(this.refs.input);
  }
}

結果以下：

使用回調函數同理，獲取到的都是DOM節點。

Refs 和函數組件

refs沒法應用於函數組件（無狀態組件），由於函數組件掛載時只是方法調用，沒有新建實例。

若是須要引用它，則應該將組件轉換爲類，就像您須要生命週期方法或狀態時同樣。

可是，只要引用DOM元素或類組件，就能夠在函數組件中使用ref屬性

參考文檔

Refs and the DOM《深刻React技術棧》