ref屬性其實就是為了獲取DOM節點，例如：

import React from 'react'

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
  }
   render() {
     return (
       <div>
          <h1>ref屬性</h1>
          <input type="text" ref={node => this.inputNode = node}/>
       </div
 
>
     )
   }
}

export default RefComponent;

利用ref屬性返回的回撥函式獲取DOM節點，從而讓頁面渲染完成之後，input聚焦，ref除了可以繫結回撥函式之外還能繫結字串，但是在後期react對字串形式不再維護，這裡就不具體說明了，就用回撥函式獲取DOM。

除了給input聚焦之外，還可以獲取當前DOM節點的內容，如下：

import React from 'react'

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
     console.log(this
 
.texthtml);
     console.log(this.texthtml.innerHTML);
  }
   render() {
     return (
       <div>
          <h1>ref屬性</h1>
          <input type="text" ref={node => this.inputNode = node}/>
          <div ref={node => this.texthtml = node}>你好</div>
       </div
 
>
     )
   }
}

export default RefComponent;

輸出結果為：

<div>你好</div>
你好

在這裡，我們也發現一個問題，ref雖然獲取DOM節點很方便，但是如果ref用的多了，後期就不好維護了，所以，儘量能少用即少用。

ref除了可以給HTML標籤新增，也可以給元件新增，例如：

import React from 'react'
import Button from './button.js'

class RefComponent extends React.Component {
  componentDidMount(){
     this.inputNode.focus();
     console.log(this.texthtml);
     console.log(this.texthtml.innerHTML);
     console.log(this.buttonNode);
  }
   render() {
     return (
       <div>
          <h1>ref屬性</h1>
          <input type="text" ref={node => this.inputNode = node}/>
          <div ref={node => this.texthtml = node}>你好</div>
          <Button ref={button => this.buttonNode = button}/>
       </div>
     )
   }
}

export default RefComponent;

但是此時，this.buttonNode得到的是一個Button這個元件例項DOM

這裡要注意一個問題，ref只能用在類定義的元件，不能用在函式元件，因為函式元件沒有例項，比如以下寫法就是錯誤的：

import React from 'react'

function TestComponent() {
   return (
    <div>函式元件</div>
   );
}

class RefComponent extends React.Component {
  componentDidMount(){
     console.log(this.testCom);
  }
   render() {
     return (
       <div>
          <h2>函式元件</h2>
          <TestComponent ref={node => this.testCom = node}/>
       </div>
     )
   }
}

export default RefComponent;

如果這樣寫，則會報錯，並且this.testCom為undefined，因為此時是獲取不到函式元件的例項的，所以以上寫法要注意

總結： ref可以給HTML標籤，類元件新增，但是不能給函式元件新增