React Refs
React 支持一種非常特殊的屬性 Ref ，你可以用來綁定到 render() 輸出的任何組件上。
這個(gè)特殊的屬性允許你引用 render() 返回的相應(yīng)的支撐實(shí)例（ backing instance ）。這樣就可以確保在任何時(shí)間總是拿到正確的實(shí)例。
ref顧名思義我們知道，其實(shí)它就可以被看座是一個(gè)組件的參考，也可以說是一個(gè)標(biāo)識。作為組件的屬性，其屬性值可以是一個(gè)字符串也可以是一個(gè)函數(shù)。
其實(shí)，ref的使用不是必須的。即使是在其適用的場景中也不是非用不可的，因?yàn)槭褂胷ef實(shí)現(xiàn)的功能同樣可以轉(zhuǎn)化成其他的方法來實(shí)現(xiàn)。但是，既然ref有其適用的場景，那也就是說ref自有其優(yōu)勢。關(guān)于這一點(diǎn)和ref的適用場景，官方文檔中是這樣說的：
在從 render 方法中返回 UI 結(jié)構(gòu)之后，你可能想沖出 React 虛擬 DOM 的限制，在 render 返回的組件實(shí)例上調(diào)用某些方法。通常來說，這樣做對于應(yīng)用中的數(shù)據(jù)流動(dòng)是不必要的，因?yàn)榛钴S的數(shù)據(jù)（ Reactive data ）流總是確保最新的 props 被傳遞到每一個(gè)從 render() 輸出的子級中去。然而，仍然有幾個(gè)場景使用這種方式是必須的，或者說是有益的：查找渲染出的組件的DOM標(biāo)記（可以認(rèn)為是DOM的標(biāo)識ID），在一個(gè)大型的非React應(yīng)用中使用React組件或者是將你現(xiàn)有的代碼轉(zhuǎn)化成React。
string 使用方法
綁定一個(gè) ref 屬性到 render 的返回值上：
<input ref="myInput" />
在其它代碼中，通過 this.refs 獲取支撐實(shí)例:
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();
ref作為回調(diào)函數(shù)的方式去使用
class Input extends Component {
constructor(props){
super(props);
}
focus = () => {
this.textInput.focus();
}
render(){
return (
<div>
<input ref={(input) => { this.textInput = input }} />
</div>
)
}
}
input參數(shù)是哪來的
當(dāng)我們在DOM Element中使用ref時(shí)，回調(diào)函數(shù)將接收當(dāng)前的DOM元素作為參數(shù)，然后存儲一個(gè)指向這個(gè)DOM元素的引用。那么在示例代碼中，我們已經(jīng)把input元素存儲在了this.textInput中，在focus函數(shù)中直接使用原生DOM API實(shí)現(xiàn)focus聚焦。
回調(diào)函數(shù)什么時(shí)候被調(diào)用
答案是當(dāng)組件掛載后和卸載后，以及ref屬性本身發(fā)生變化時(shí)，回調(diào)函數(shù)就會被調(diào)用。
可以在組件實(shí)例中使用ref。
前面的示例代碼是在DOM添加ref屬性，那么我們來看看如何在組件實(shí)例中使用。再上代碼：
//<Input>來源于上面的示例代碼??
class AutoFocusTextInput extends Component {
componentDidMount(){
this.textInput.focus();
}
render(){
return (
<Input ref={(input) => { this.textInput = input }}>
)
}
}
當(dāng)我們在<Input>中添加ref屬性時(shí)，其回調(diào)函數(shù)接收已經(jīng)掛載的組件實(shí)例<Input>作為參數(shù)，并通過this.textInput訪問到其內(nèi)部的focus方法。也就是說，上面的示例代碼實(shí)現(xiàn)了當(dāng)AutoFocusTextInput組件掛載后<Input>組件的自動(dòng)聚焦。
接下來文檔指出，<Input>組件必須是使用class聲明的組件，不然無法使用。這意味著React逐漸與ES6全面接軌了。
不能在無狀態(tài)組件中使用ref。
原因很簡單，因?yàn)閞ef引用的是組件的實(shí)例，而無狀態(tài)組件準(zhǔn)確的說是個(gè)函數(shù)組件(Functional Component)，沒有實(shí)例。上代碼：
function MyFunctionalComponent() {
return <input />;
}
class Parent extends React.Component {
render() {
return (
<MyFunctionalComponent
ref={(input) => { this.textInput = input; }} />
);
}
}
上面的代碼是無法正常工作的。
父組件的ref回調(diào)函數(shù)可以使用子組件的DOM。
這是Facebook非常不推薦的做法，因?yàn)檫@樣會打破組件的封裝性，這種方法只是某些特殊場景下的權(quán)宜之計(jì)。我們看看如何實(shí)現(xiàn)，上代碼：
function CustomTextInput(props) {
return (
<div>
<input ref={props.inputRef} />
</div>
);
}
class Parent extends React.Component {
render() {
return (
<CustomTextInput
inputRef={el => this.inputElement = el}
/>
);
}
}
原理就是父組件把ref的回調(diào)函數(shù)當(dāng)做inputRefprops傳遞給子組件，然后子組件<CustomTextInput>把這個(gè)函數(shù)和當(dāng)前的DOM綁定，最終的結(jié)果是父組件<Parent>的this.inputElement存儲的DOM是子組件<CustomTextInput>中的input。
同樣的道理，如果A組件是B組件的父組件，B組件是C組件的父組件，那么可用上面的方法，讓A組件拿到C組件的DOM。但是官方態(tài)度是discouraged，這種多級調(diào)用確實(shí)不雅，我們確實(shí)需要考慮其他更好的方案了。
作者：ssssyoki
鏈接：https://juejin.im/post/5927f51244d904006414925a
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
