本文旨在澄清react中“dom组件”的概念，并深入探讨refs在原生dom元素和自定义组件（特别是类组件实例）之间的转发机制。我们将解析官方文档中的常见困惑，并通过示例代码演示如何正确地将refs转发给不同的组件类型，从而帮助开发者更好地利用refs进行dom或组件实例的直接操作。
在React开发中，Refs提供了一种访问DOM节点或React组件实例的方法。它们是处理焦点、文本选择、媒体播放、触发命令式动画以及集成第三方DOM库等场景的关键工具。然而，关于Refs与“DOM组件”以及“类组件实例”之间的关系，特别是React官方文档中的一些表述，有时会引起开发者的困惑。
理解“DOM组件”在React上下文中的含义
在React的语境中，当提及“DOM组件”时，通常指的是原生的HTML元素，例如<div>、<button>、<input>等。这些是浏览器直接渲染的元素，我们可以直接将Refs附加到它们上面，以便访问它们的底层DOM节点。
例如，直接在原生input元素上使用Ref：
import React, { useRef, useEffect } from 'react';
function MyForm() {
const inputRef = useRef(null);
useEffect(() => {
// 在组件挂载后，inputRef.current将指向实际的DOM input元素
if (inputRef.current) {
inputRef.current.focus(); // 自动聚焦
}
}, []);
return (
<input type="text" ref={inputRef} placeholder="输入一些内容" />
);
}在这种情况下，inputRef.current将直接指向原生的HTML <input> DOM元素。
Ref转发的核心机制
Refs的强大之处在于其转发能力。通过React.forwardRef，父组件可以获取到子组件内部的DOM节点或组件实例的引用。React官方文档中提到：“Ref转发不限于DOM组件。你也可以将Refs转发给类组件实例。”这句话的重点在于区分了Ref可以指向的不同目标类型。
- Ref指向原生DOM元素： 这是最常见的用法，Ref会直接指向底层的HTML元素。
- Ref指向类组件实例： 当Ref被转发到一个类组件时，它将指向该类组件的实例，而不是其内部的某个DOM元素。这意味着你可以通过这个Ref调用类组件内部的方法或访问其状态（尽管通常不推荐直接操作组件内部状态）。
这种区分至关重要。对于函数组件，由于它们没有实例，如果需要将Ref转发到其内部的DOM元素，就必须使用React.forwardRef。对于类组件，Ref可以直接指向其自身实例。
Ref转发至类组件实例的示例
让我们通过一个具体的例子来理解Ref如何转发给类组件实例。假设我们有一个ClassComponent，它内部渲染了一个input元素。我们希望父组件能够获取到这个ClassComponent的实例，或者通过它间接地获取到内部的input元素。
首先，定义一个简单的类组件：
import React from 'react';
class ClassComponent extends React.Component {
focusInput = () => {
// 假设这里有一个内部inputRef，或者直接操作通过props传入的innerRef
if (this.props.innerRef && this.props.innerRef.current) {
this.props.innerRef.current.focus();
} else {
console.log("无法聚焦：innerRef未设置或其current属性为空");
}
};
render() {
// 将父组件通过innerRef传入的ref附加到内部的input元素上
return (
<input
value={this.props.value}
onChange={this.props.onChange}
ref={this.props.innerRef} // 这里将Ref附加到DOM元素
placeholder="这是一个类组件中的输入框"
/>
);
}
}现在，我们创建一个函数组件Input，它将Ref转发给ClassComponent。这里，我们使用React.forwardRef来接收父组件的Ref，并将其作为innerRef属性传递给ClassComponent。
import React from 'react';
// ClassComponent定义如上
// 使用React.forwardRef将Ref转发给ClassComponent
const Input = React.forwardRef(function (props, ref) {
// 这里的ref是父组件传入的，它将被传递给ClassComponent的innerRef属性
return <ClassComponent {...props} innerRef={ref} />;
});
// 父组件如何使用这个转发了Ref的Input组件
function ParentComponent() {
const classComponentRef = React.useRef(null);
const handleClick = () => {
if (classComponentRef.current) {
// 这里的classComponentRef.current指向ClassComponent内部的input DOM元素
// 因为ClassComponent直接将innerRef附加到了input上
classComponentRef.current.focus();
classComponentRef.current.value = "已聚焦并设置值";
}
};
return (
<div>
<Input ref={classComponentRef} />
<button onClick={handleClick}>聚焦并设置输入框</button>
</div>
);
}
export default ParentComponent;在这个例子中，ParentComponent通过classComponentRef获取到的实际上是ClassComponent内部的那个input DOM元素的引用，因为ClassComponent直接将innerRef附加到了input元素上。
如果ClassComponent内部不将innerRef附加到DOM元素，而是希望父组件获取到ClassComponent的实例本身呢？
import React from 'react';
class ClassComponentInstance extends React.Component {
sayHello = () => {
alert("Hello from ClassComponentInstance!");
};
render() {
return (
<div>
<p>这是一个类组件实例</p>
<input type="text" placeholder="内部输入框" />
</div>
);
}
}
// 父组件直接将Ref附加到ClassComponentInstance
function ParentComponentWithInstanceRef() {
const instanceRef = React.useRef(null);
const handleInstanceClick = () => {
if (instanceRef.current) {
// 这里的instanceRef.current指向ClassComponentInstance的实例
instanceRef.current.sayHello(); // 调用实例方法
}
};
return (
<div>
<ClassComponentInstance ref={instanceRef} />
<button onClick={handleInstanceClick}>调用类组件实例方法</button>
</div>
);
}
export default ParentComponentWithInstanceRef;在这个场景中，instanceRef.current将直接指向ClassComponentInstance的实例，允许父组件调用其公共方法（如sayHello）。这正是文档中“你可以将Refs转发给类组件实例”所强调的含义。
总结与注意事项
- DOM组件在React Refs的语境中，通常指原生的HTML元素（如<div>, <button>, <input>)。Refs可以直接附加到这些元素上，获取它们的DOM节点。
- Ref转发允许父组件获取到子组件内部的DOM节点或组件实例的引用。
- 当Ref被转发给一个函数组件时，必须使用React.forwardRef，并且通常Ref会指向该函数组件内部渲染的DOM元素。
- 当Ref被转发给一个类组件时，Ref可以指向该类组件的实例，从而允许父组件访问该实例的方法和属性。
- 在类组件内部，如果你希望Ref最终指向一个DOM元素，你需要将通过props（如innerRef）传入的Ref显式地附加到该DOM元素上。
理解这些细微的差别对于正确使用Refs至关重要，它能帮助你避免常见的错误，并更灵活地控制React应用中的DOM和组件行为。然而，过度使用Refs可能会导致命令式代码的增加，与React的声明式范式相悖，因此应在必要时才使用Refs。
