Refs提供了一種訪問DOM節(jié)點或在render方法中創(chuàng)建的React元素的方法规揪。
refs是React組件中非常特殊的props，可以附加在任何一個組件上迷帜。組件被調(diào)用時會新建一個該組件的實例口叙，而refs就會指向這個實例。
在react\lib\ReactBaseClasses.js文件中织盼，可以看出每個組件都存在refs屬性。
/**
* Base class helpers for the updating state of a component.
*/
function ReactComponent(props, context, updater) {
this.props = props;
this.context = context;
this.refs = emptyObject;
// We initialize the default updater but the real one gets injected by the
// renderer.
this.updater = updater || ReactNoopUpdateQueue;
}
在React組件上添加refs
1.使用字符串的方式添加refs
格式：ref='string'
import React, { Component } from 'react';
import './App.css';
import ReactDOM from 'react-dom';
class Children extends Component {
render() {
return <div>
子組件
</div>
}
}
class App extends Component {s
render() {
return (
<div className="App">
{/* 使用字符串方式 */}
<Children ref='children' />
</div>
);
}
componentDidMount() {
console.log(this);
console.log('*******************************');
console.log(this.refs.children);
}
}
輸出結(jié)果：
在這里插入圖片描述
refs 可以是字符串酱塔，同樣可以是回調(diào)函數(shù)沥邻。
2.使用 回調(diào)函數(shù) 的方式添加refs
render方法修改如下：
render() {
return (
<div className="App">
{/* 使用字符串方式 */}
{/* <Children ref='childern' /> */}
{/* 使用回調(diào)函數(shù)方式 */}
<Children ref={ref=>this.childrenRef=ref} />
</div>
);
}
在這里插入圖片描述
想要獲取當(dāng)前React組件的實例（引用）可以使用this，獲取所擁有子組件的實例（引用）可以使用refs羊娃。
在React組件上添加refs唐全，獲取到的是組件的實例。而如果在原生的Dom組件上添加refs獲取到的事什么呢？接著看
在DOM元素上添加refs
class App extends Component {
constructor(props){
super(props);
}
render() {
return (
<div className="App">
<input type='text' ref='input'/>
</div>
);
}
componentDidMount() {
console.log(this);
console.log('*******************************');
console.log(this.refs.input);
}
}
結(jié)果如下：
在這里插入圖片描述
使用回調(diào)函數(shù)同理邮利，獲取到的都是DOM節(jié)點弥雹。
Refs 和函數(shù)組件
refs無法應(yīng)用于函數(shù)組件（無狀態(tài)組件），因為函數(shù)組件掛載時只是方法調(diào)用延届，沒有新建實例剪勿。
如果需要引用它，則應(yīng)該將組件轉(zhuǎn)換為類方庭，就像您需要生命周期方法或狀態(tài)時一樣厕吉。
但是，只要引用DOM元素或類組件械念，就可以在函數(shù)組件中使用ref屬性
參考文檔
Refs and the DOM
《深入React技術(shù)椡分欤》
