在react中，可以使用refs來(lái)訪(fǎng)問(wèn)dom睁蕾，或者在render中創(chuàng)建react對(duì)象苞笨。

使用refs的主要用途是

1. 做一些動(dòng)畫(huà)的交互
2. 媒體控件的播放
3. 獲取焦點(diǎn)债朵、獲取文本等

使用refs的方式有兩種，一種是使React.createRef() API瀑凝，另一種是使用 回調(diào)形式的refs序芦。

先來(lái)介紹第一種方式，使用React.createRef() API

import React, { Component } from 'react'
export default class App extends React.Component {
  constructor(props) {
    super(props);
    // 創(chuàng)建一個(gè) ref 來(lái)存儲(chǔ) textInput 的 DOM 元素
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // 直接使用原生 API 使 text 輸入框獲得焦點(diǎn)
    // 注意：我們通過(guò) "current" 來(lái)訪(fǎng)問(wèn) DOM 節(jié)點(diǎn)
    this.textInput.current.focus();
    console.log(this.textInput.current);//這邊輸出input的dom對(duì)象
  }

  render() {
    // 告訴 React 我們想把 <input> ref 關(guān)聯(lián)到
    // 構(gòu)造器里創(chuàng)建的 `textInput` 上
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />

        <input
          type="button"
          value="點(diǎn)擊我獲取焦點(diǎn)"
          onClick={this.focusTextInput}
        />
      </div>
    );
   }
 }

第二種是回調(diào) Refs粤咪，React 將在組件掛載時(shí)谚中，會(huì)調(diào)用 ref 回調(diào)函數(shù)并傳入 DOM 元素，當(dāng)卸載時(shí)調(diào)用它并傳入 null射窒。在 componentDidMount 或 componentDidUpdate 觸發(fā)前藏杖，React 會(huì)保證 refs 一定是最新的。

import React, { Component } from 'react'
export default class App extends React.Component {
  constructor(props) {
    super(props);
    // 創(chuàng)建一個(gè) ref 來(lái)存儲(chǔ) textInput 的 DOM 元素
    this.textInput = null;
    this.setTextInputRef = element => {
      this.textInput = element;
    };
    this.focusTextInput = () => {
      // 使用原生 DOM API 使 text 輸入框獲得焦點(diǎn)
      if (this.textInput) this.textInput.focus();
    };
  }

  componentDidMount() {
    // 組件掛載后脉顿，讓文本框自動(dòng)獲得焦點(diǎn)
    this.focusTextInput();
  }

  render() {
    // 使用 `ref` 的回調(diào)函數(shù)將 text 輸入框 DOM 節(jié)點(diǎn)的引用存儲(chǔ)到 React
    // 實(shí)例上（比如 this.textInput）
    return (
      <div>
        <input
          type="text"
          ref={this.setTextInputRef}
        />
        <input
          type="button"
          value="點(diǎn)擊我獲取焦點(diǎn)"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

后面來(lái)講下蝌麸，父子組件怎么樣傳遞refs，你可以在組件間傳遞回調(diào)形式的 refs艾疟，代碼如下

import React, { Component } from 'react'
function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    // 創(chuàng)建一個(gè) ref 來(lái)存儲(chǔ) textInput 的 DOM 元素
    this.inputElement = null;
    this.setTextInputRef = element => {
      this.inputElement = element;
    };
    this.focusTextInput = () => {
      // 使用原生 DOM API 使 text 輸入框獲得焦點(diǎn)
      console.log(this.inputElement)
      if (this.inputElement) this.inputElement.focus();
    };
  }
  componentDidMount() {
    // 組件掛載后来吩，讓文本框自動(dòng)獲得焦點(diǎn)
    this.focusTextInput();
  }
  render() {
    return (
      <div> 
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
      <input
          type="button"
          value="點(diǎn)擊我獲取焦點(diǎn)"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

在上面的例子中，App 把它的 refs 回調(diào)函數(shù)當(dāng)作 inputRef props 傳遞給了 CustomTextInput蔽莱，而且 CustomTextInput 把相同的函數(shù)作為特殊的 ref 屬性傳遞給了 <input>弟疆。結(jié)果是，在 App 中的 this.inputElement 會(huì)被設(shè)置為與 CustomTextInput 中的 input 元素相對(duì)應(yīng)的 DOM 節(jié)點(diǎn)盗冷。

使用 React.forwardRef 來(lái)獲取傳遞 ref怠苔，React 傳遞 ref 給 fowardRef 內(nèi)函數(shù) (props, ref) => ...，作為其第二個(gè)參數(shù)仪糖，然后轉(zhuǎn)發(fā)到它渲染的 DOM button

import React, { Component } from 'react'
const CustomTextInput = React.forwardRef((props, ref) => (
  <div>
      <input ref={ref} />
   </div>
));

class App extends React.Component {
  constructor(props) {
    super(props);
    // 創(chuàng)建一個(gè) ref 來(lái)存儲(chǔ) textInput 的 DOM 元素
    this.inputElement = React.createRef();
    this.focusTextInput = () => {
      // 使用原生 DOM API 使 text 輸入框獲得焦點(diǎn)
      console.log(this.inputElement)
      this.inputElement.current.focus();
    };
  }

  render() {
    return (
      <div> 
      <CustomTextInput
        ref={this.inputElement}
      />
      <input
          type="button"
          value="點(diǎn)擊我獲取焦點(diǎn)"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}