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元素/组件直接访问的前提下使用。