React之Ref如何去使用？

1. ref對象的建立，所謂建立，就是通過React.createRef或者React.useRef來建立一個Ref原始對象。
2. 而react對ref的處理則是，主要指的是對于标簽中的ref屬性，react是如何處理以及react轉發ref。

ref對象的建立

什麼是ref對象，ref對象就是用createRef或者useRef建立出來的對象。

{
    current: null // current指向的ref對象擷取到的實際内容。可以是dom元素，元件執行個體，或者是其它
}      

react提供兩種方法建立ref對象。

• 類元件：React.createRef

第一種是通過React.createRef 建立一個ref對象。

class Index extends React.Component{
    constructor(props){
        super(props)
        this.currentDom = React.createRef(null)  // 建立ref
    }
    componentDidMount() {
        console.log(this.currentDom)
    }
    render = () => <div ref={this.currentDom}> ref 對象建立擷取元素元件</div>
}      

• 函數元件：useRef

第二種是通過函數元件建立Ref，可以用hooks中的useRef來達到同樣的效果

export default function Index () {
    const currentDom = React.useRef(null)
    UseEffect(() => {
        console.log(currentDom.current)
    },[])
    return <div ref={currentDom}></div>
}      

• ref屬性是一個字元串

class Children extends Component{
    render = () => <div>hello,world</div>
}

export default class Index extends React.Component{
    componentDidMount(){
        console.log(this.refs)
    }
    render = () => <div>
        <div ref="currentDom"></div>
        <Children ref="currentComInstance"></Children>
    </div>
}      

• ref 屬性是一個函數

class Children extends React.Component{
    render = () => <div>hello,world</div>
}

export default class Index extends React.component{
    currentDom = null
    currentComponentInstance = null
    componentDidMount () {
        console.log(this.currentDom)
        console.log(this.currentComponentInstance)
    }
    
     render=()=> <div>
        <div ref={(node)=> this.currentDom = node }  >Ref模式擷取元素或元件</div>
        <Children ref={(node) => this.currentComponentInstance = node  }  />
    </div>
}      

• ref屬性是一個ref對象