在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)的方式疹味。
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()
