ReactJS - Forwarding Refs：初学者指南

你好，未来的React法师们！今天，我们将踏上一段激动人心的旅程，探索React世界中的一个概念——"转发Refs"。如果你是编程新手，不用担心；我会成为你的友好向导，我们会一步步前进。在本教程结束时，你将能够像专业人士一样转发refs！

ReactJS - Forwarding Refs

什么是Refs，为什么我们需要转发它们？

在我们深入研究refs转发之前，让我们先来谈谈refs本身。想象一下你正在建造一座房子（这有点像我们创建Web应用程序时的做法）。有时，你需要直接访问或操作房子的某个特定部分。在React中，refs就像是我们用来在组件中做到这一点的特殊工具。

现在，refs转发就像是在我们的房子里不同房间之间传递这些特殊工具。这是一种技术，允许我们通过一个组件将ref发送到它的子组件。当我们使用可重用组件库时，这特别有用。

forwardRef方法：我们的魔杖

React为我们提供了一个叫做forwardRef的方法，使得refs转发成为可能。把它想象成一根魔杖，它允许我们的组件接受一个ref并将其传递下去。

forwardRef方法的签名

让我们看看我们如何使用这根魔杖：

const ForwardedComponent = React.forwardRef((props, ref) => {
// 组件逻辑在这里
});

这可能一开始看起来有点吓人，但让我们分解一下：

我们正在创建一个新的组件并将其赋值给ForwardedComponent。
我们使用React.forwardRef()来包装我们的组件函数。
我们的组件函数现在接受两个参数：props（我们熟悉的）和ref（我们的新朋友）。

在组件中应用forwardRef

现在，让我们看看我们如何在现实世界的场景中使用它。想象一下我们正在创建一个自定义输入组件，我们希望在整个应用程序中使用它。

import React from 'react';

const FancyInput = React.forwardRef((props, ref) => {
return <input ref={ref} {...props} style={{border: '2px solid purple'}} />;
});

export default FancyInput;

让我们分解一下：

我们导入React（这总是很重要的！）。
我们使用React.forwardRef创建我们的FancyInput组件。
在我们的组件内部，我们返回一个<input>元素。
我们使用ref属性将ref传递给我们的<input>。
我们将props展开到我们的<input>上，以便它可以接受我们传递给FancyInput的任何属性。
我们添加一点样式，让我们的输入看起来更华丽（有人喜欢紫色边框吗？）。

现在，当我们在应用程序的其他地方使用我们的FancyInput组件时，我们可以将它附加一个ref，这个ref实际上会被附加到下面的<input>元素上。

下面是如何使用我们的新组件的一个示例：

import React, { useRef, useEffect } from 'react';
import FancyInput from './FancyInput';

function App() {
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus();
}, []);

return (
<div>
<FancyInput ref={inputRef} placeholder="输入一些华丽的内容..." />
</div>
);
}

在这个例子中：

我们使用useRef创建了一个ref。
我们将这个ref传递给我们的FancyInput组件。
在useEffect钩子中，我们使用ref来在组件挂载时聚焦输入。

就这样！我们已经成功地通过我们的自定义组件转发了一个ref。

这有什么用？

你可能想知道，“为什么要这么麻烦？”想象一下你正在构建一个可重用组件的库。通过使用forwardRef，你给了组件的使用者在与必要时交互底层DOM元素的能力，而不需要暴露组件的整个内部结构。

这就像给某人一个只有必要按钮的电视遥控器，而不是让他们面对电视的所有内部电路。

forwardRef方法的表格

下面是一个总结我们讨论的关键方法的便捷表格：

方法	描述	示例
`React.forwardRef()`	创建一个可以转发ref属性到子组件的React组件	`const FancyButton = React.forwardRef((props, ref) => ...)`
`useRef()`	创建一个可变的ref对象	`const ref = useRef(null)`
`ref`属性	将ref附加到React元素上	`<input ref={ref} />`

结论

就这样，朋友们！我们已经穿越了React中转发refs的土地。记住，像任何强大的工具一样，要谨慎使用refs和refs转发。它们非常适合管理焦点、触发动画或与第三方DOM库集成。

在你继续你的React冒险时，你会发现更多转发refs可能非常有用的场景。继续练习，继续编码，不久之后，你将构建出令人惊叹的React应用程序！

快乐编码，愿你的refs总是正确转发！

Credits: Image by storyset