在React等框架出現(xiàn)之前，web頁面的交互是依靠操作DOM實(shí)現(xiàn)的，到了出現(xiàn)vdom概念出來，React和Vue等框架利用組件的狀態(tài)管理，通過操作dom的js對(duì)象，來實(shí)現(xiàn)頁面的變化渲染。在React的數(shù)據(jù)流中，是自上向下的props傳遞數(shù)據(jù)，我們可以通過props來讓子組件重新渲染，然而實(shí)際場景中，我們還是需要按照我們的方式來操作元素的行為，這個(gè)時(shí)候就需要用到ref來獲取某元素dom節(jié)點(diǎn)

比如：需要focus一個(gè)input輸入框，讓媒體播放

使用ref的方式：
1、通過字符串定義獲取
2、通過回調(diào)函數(shù)的方式去使用
3、使用React.createRef()

1、通過字符串定義

 <input type='text' ref='inputRef' />
//訪問時(shí)
console.log(this.refs.inputRef)

這種方式已經(jīng)不被react官方推薦了，會(huì)在將來的某個(gè)版本移除掉，推薦開發(fā)者使用回調(diào)的方式。

官網(wǎng)截圖.png

2、通過回調(diào)函數(shù)的方式去使用

class Home  extends Component{
    constructor(){
        super()
    }
   render(){
      return(
        <div>
           <input
              ref={c => {
              this.inputRef = c;}}
            />
        </div>
      )
    }
}

上面栗子中，當(dāng)我們使用ref時(shí)，回調(diào)函數(shù)會(huì)接收當(dāng)前dom元素作為參數(shù)，當(dāng)我們使用this.refs.inputRef時(shí)候，可以獲取到該節(jié)點(diǎn)元素，調(diào)用原生DOM API實(shí)現(xiàn)input的聚焦等多種方法。
該回調(diào)函數(shù)會(huì)等組件掛載完畢之后，或者是ref屬性發(fā)生變化的時(shí)候，回調(diào)函數(shù)就會(huì)被調(diào)用。

以上兩種方法，可以思考下，為什么要廢除掉字符串的引用，改為回調(diào)函數(shù)的方式的好處是什么？

實(shí)際場景中，當(dāng)我們使用this.refs.inputRef是一個(gè)獨(dú)立的dom元素，如果是屬于字符串引用，那么是無法知道inputRef什么時(shí)候卸載，也無法合理的銷毀，如果使用回調(diào)函數(shù)，即當(dāng)發(fā)生父組件觸發(fā)卸載，子組件觸發(fā)回調(diào)函數(shù)，可以在此時(shí)將inputRef銷毀掉。

3、使用React.createRef()

用React.createRef()創(chuàng)建refs，通過ref屬性

class Home  extends Component{
    constructor(){
        super()
        this.inputRef = React.createRef()
    }
   render(){
      return(
        <div>
           <input
              ref={ this.inputRef}
            />
        </div>
      )
    }
}
//使用
//this.inputRef.current.focus()

使用createRef方法，生成ref對(duì)象
render的時(shí)候，接收子組件或者dom元素的ref屬性
用this.inputRef.current來獲取這個(gè)節(jié)點(diǎn)元素

注意：不能在無狀態(tài)組件中使用ref

因?yàn)閞ef引用的是組件的實(shí)例，無狀態(tài)組件中是沒有實(shí)例的。

function MyComponent() {
    return <input />;
}

class Home extends React.Component {
    render() {
        return (
            <MyComponent
                ref={(input) => { this.textInput = input; }} />
        );
    }
}
//以上代碼是無效的

但是function申明的組件內(nèi)部還是可以使用ref的，只要這個(gè)ref不是用來訪問function組件

function MyComponent (){
  let inputRef = React.createRef()
  return (
    <div>
      <input ref={inputRef}  type='text'/>
    </div>
  )  
}
//如何使用
//inputRef.current.focus()