React中的ref是什麼？

Question

我無法理解React中的參考文獻。我明白這是一個回調函數，你把它放在渲染函數中，但除此之外，我不明白它是什麼以及它的目的是什麼。

Answer 1

參考文獻是一種讓您獲得處理回到您創建的組件的方法。

即。

<Text ref={(component)=>{this.textComponent = component}} > Here is some Text</Text> 

然後在後面的代碼，你可以通過做訪問您的文字：

this.textComponent 

這將使你然後在面向對象的方式對組件調用功能。

我只想指出，React/React-Native使用聲明性編程範例，其中數據和「控制」通過屬性的自上而下通過管理。而在命令式風格中，您處理對象和指針，並將它們傳遞給它們以便調用它們上的函數。在這種情況下，Refs是一個逃生艙口，它允許你獲得一個聲明的組件，這樣你就可以以一種命令式的風格調用它們的功能。

看到官方文件做出反應的裁判： https://reactjs.org/docs/refs-and-the-dom.html

Answer 2

陣營具有處理兒童典型方式。它以自頂向下的方式使用props。而要修改孩子，你必須用新的道具重新渲染。但有些情況下，您想修改/處理此典型流程之外的孩子。在這些情況下，你使用refs。

REF是，需要一個回調的屬性並且每當組件安裝或卸載此回調被調用。可以將Refs添加到這兩個dom元素或組件。示例：

return (
    <div> 
    <input 
    type="text" 
    // ref to a dom element 
    ref={(input) => { this.textInput = input; }} /> 
    </div> 
); 

return (
    <MyComponent 
    // ref to a MyComponent(child component) 
    ref={(component) => { this.childComponent = component; }} 
    {...props} 
    /> 
); 

無論何時裝載組件，都會使用dom元素或子組件實例調用ref回調。並且每當該組件被卸載時調用null。現在

可以使用this.textInput或this.childComponent並調用它的不同的可用方法。

---

可以僅向DOM元素或類組件提供參考。它們不適用於功能組件。例如：

function MyFunctionalComponent(props) { 
    return <input type="text" />; 
} 

return (
    <MyFunctionalComponent 
    // This won't work 
    ref={(component) => { this.childComponent = component; }} 
    {...props} 
    /> 
); 

---

參考文獻應在其絕對必要的，因爲他們給你的DOM元素/組件直接訪問的前提下使用。