以前的方式：

在元素上給一個(gè)ref的屬性，值是字符串，如 ：ref="d1"
訪問(wèn)這個(gè)真是的dom元素 ： this.refs.d1

現(xiàn)在推薦的方式，回調(diào)

在元素上給一個(gè)ref屬性，值是回調(diào)函數(shù)，會(huì)把當(dāng)前dom元素當(dāng)參數(shù)傳到回調(diào)函數(shù)里面。
過(guò)程解析：這個(gè)節(jié)點(diǎn)被渲染的時(shí)候，這個(gè)回調(diào)函數(shù)會(huì)被調(diào)用，會(huì)傳遞一個(gè)參數(shù)：這個(gè)真實(shí)的DOM元素，你就可以做任何事情。

ref={elt=>{this.d1=elt}} //將這個(gè)DOM掛載到組件實(shí)例上
this.d1 //訪問(wèn)這個(gè)真實(shí)的DOM元素

在父組件上拿到子組件ref

class Sub extends Component{
    constructor(props){
        super(props)
    }
    render(){
        let {d1} = this.props
        return (
            <div>
                <div ref={d1}>子組件的div</div>
            </div>
        )
    }
}

export default class Refs extends Component{
    constructor(props){
        super(props)
    }       
    getChildDom=()=>{
        console.log(this.d1)
    }
    render(){
        return (
            <div>
                <Sub d1={elt=>{this.d1=elt}}></Sub>
                <div
                
                >會(huì)被拿到</div>
                <button onClick={this.getChildDom}>getChildDom</button>
            </div>
        )
    }
}

記住一個(gè)原則：能不用 ref 就不用。特別是要避免用 ref 來(lái)做 React.js 本來(lái)就可以幫助你做到的頁(yè)面自動(dòng)更新的操作和事件監(jiān)聽(tīng)。多余的 DOM 操作其實(shí)是代碼里面的“噪音”，不利于我們理解和維護(hù)。