JS中Ref转发与传递详解

本文深入解析了JavaScript中React的Ref转发机制，这是一种允许父组件访问并操作子组件内部DOM元素或组件实例的技术。通过`React.forwardRef`高阶组件，函数组件也能接收并传递ref，实现诸如焦点管理、动画触发以及集成第三方库等命令式操作。文章详细阐述了Ref转发的实现方式、典型应用场景，并强调了使用时的注意事项，例如ref不是props、避免滥用以及在高阶组件(HOC)中显式转发ref的重要性。理解并正确使用Ref转发，能帮助开发者突破React声明式UI的限制，更灵活地控制组件行为，构建可复用的组件，提升用户体验。

Ref转发的解决方案是使用React.forwardRef，它允许父组件将ref传递给子组件并直接访问其内部DOM元素或组件实例；具体实现是通过将子组件包裹在React.forwardRef中，使其接收props和ref两个参数，并将ref绑定到内部目标元素上，从而实现命令式操作如聚焦输入框、控制媒体播放等；典型应用场景包括管理焦点、触发动画、集成第三方库及访问DOM节点；使用时需注意ref不是props，不会触发重新渲染，且不能直接用于普通函数组件，必须通过forwardRef使其“ref-able”；此外，ref的滥用会破坏声明式逻辑，应仅在必要时使用；在高阶组件（HOC）中，ref不会自动转发，需显式在HOC内部使用React.forwardRef接收ref并传递给被包装组件，同时确保被包装组件本身也支持ref转发，否则ref链条会中断导致ref.current为null或指向错误实例。

Ref转发，在JavaScript的世界里，尤其是在React这样的UI库中，它提供了一种机制，允许父组件将一个ref向下传递给子组件，即使这个子组件是一个函数组件，最终这个ref可以附着在子组件内部的一个DOM元素或另一个组件实例上。说白了，就是父组件想直接“摸”到子组件里面的某个东西，比如一个输入框，然后对它做一些命令式的操作，比如聚焦。

解决方案

要实现Ref转发，我们主要依赖React提供的React.forwardRef这个高阶组件（HOC）。它的核心思想是，当你定义一个组件时，不再仅仅接收props，还能接收到父组件传下来的ref。

具体操作是这样：你把你原本的函数组件或类组件（虽然类组件用得少些，但原理一样）包裹在React.forwardRef里面。这个forwardRef会给你的组件函数多传递一个参数，就是那个ref。

import React, { useRef, useEffect } from 'react';

// 子组件，我们希望它能接收并转发一个ref
const MyInput = React.forwardRef((props, ref) => {
  // 在这里，ref参数就是父组件传递下来的ref
  // 我们可以把它附着到内部的DOM元素上
  return <input type="text" ref={ref} {...props} />;
});

// 父组件，使用MyInput并传递ref
function ParentComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    // 假设我们想在组件挂载后自动聚焦输入框
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <p>这是一个父组件</p>
      <MyInput placeholder="请输入内容" ref={inputRef} />
      <button onClick={() => inputRef.current.value = ''}>清空输入</button>
    </div>
  );
}

export default ParentComponent;

看，MyInput这个函数组件，通过React.forwardRef的包裹，它现在能接收第二个参数ref了。然后，我们简单地把这个ref直接传给了内部的<input>元素。这样一来，父组件ParentComponent创建的inputRef就能直接指向MyInput内部的那个真实的DOM <input>元素了。这比什么都用props来控制要直接得多，尤其是在处理一些DOM原生行为的时候。

为什么我们需要Ref转发？Ref传递的典型场景有哪些？

有时候，我们写React组件，虽然倡导“声明式UI”，但总会遇到一些不得不与底层DOM元素打交道的场景。Ref转发就是为了解决这些“不得不”的问题。

想想看，你可能需要：

• 管理焦点、文本选择或媒体播放。 比如，一个自定义的搜索框组件，当用户点击搜索按钮后，你希望输入框能自动获得焦点，或者一个视频播放器组件，你需要调用它的play()或pause()方法。这些都是命令式的操作，不是通过改变props就能直接搞定的。
• 触发强制性动画。 有些动画库可能需要直接操作DOM元素来启动动画。
• 集成第三方DOM库。 比如一些图表库、日期选择器，它们可能需要你提供一个DOM元素作为容器，然后它们自己去渲染内容。这时候，你需要把一个ref传递给它们。
• 访问子组件的DOM节点。 比如，你有一个通用按钮组件，但某个特定场景下，你需要获取它的宽度或位置信息。

Ref转发就是提供了一个“逃生舱”，让你能安全、可控地突破React的声明式限制，去直接操作DOM，而不用搞得一团糟。它不是用来传递数据的，数据流依然是props的职责；ref是用来传递“引用”的，通常是为了执行一些命令式的操作。

Ref转发在使用时有哪些需要注意的细节和潜在的“坑”？

Ref转发虽然方便，但用起来还是有些门道的，不是随便就能用的。

首先，ref不是props。这意味着当你把一个ref传递给一个组件时，它不会像props那样触发组件的重新渲染。ref.current的值变了，React是不会知道的，也不会因此重新渲染组件。你得自己去管理这些命令式的副作用，通常结合useEffect来做。

其次，你不能直接把ref附着到普通的函数组件上。如果你有一个普通的const MyComponent = () =>

再来，ref参数是forwardRef回调函数的第二个参数。这有时候会让人感到困惑，因为我们习惯了第一个参数是props，然后就没有了。但forwardRef就是多给了一个ref，所以你的函数签名会是(props, ref) => {...}。别写错了，否则ref就收不到了。

还有，不要滥用ref。Ref是一个“逃生舱”，不是日常交通工具。大多数情况下，你都应该通过props来传递数据和回调函数，实现声明式的UI。只有当你确实需要直接操作DOM，或者调用子组件暴露的命令式方法时，才考虑使用ref。过度使用ref会使你的组件变得难以理解和维护，因为它引入了命令式的、非React式的数据流。

最后，ref对象本身是可变的。ref.current这个属性是可读写的，你可以随时改变它指向的内容。这与React的单向数据流和不可变性原则有些冲突，所以在使用时要格外小心，确保你的操作是幂等的，并且不会产生意料之外的副作用。

Ref转发在处理高阶组件（HOC）时有什么特别的考量？

高阶组件（HOC）是React中一种强大的复用逻辑的方式，它本质上是一个函数，接收一个组件作为参数，然后返回一个新的组件。但HOC有一个常见的“陷阱”：它们默认不会自动转发ref。

想象一下，你有一个withLogger HOC，它给任何传入的组件增加一些日志功能：

// 假设这是你的HOC
const withLogger = (WrappedComponent) => {
  const WithLogger = (props) => {
    // 这里可能会做一些日志记录
    console.log('Component rendered:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
  // 方便调试，给HOC包裹后的组件一个友好的名字
  WithLogger.displayName = `withLogger(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
  return WithLogger;
};

// 原始组件
const MyButton = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

// 包裹后的组件
const LoggedButton = withLogger(MyButton);

// 父组件尝试使用LoggedButton并传递ref
function App() {
  const btnRef = useRef(null);

  useEffect(() => {
    // 这里的btnRef.current会是LoggedButton组件的实例（如果LoggedButton是类组件）
    // 或者null（如果LoggedButton是函数组件），但它不会是MyButton内部的那个button DOM元素
    console.log(btnRef.current); // 很大可能不是你想要的那个DOM button
  }, []);

  return <LoggedButton ref={btnRef}>点击我</LoggedButton>;
}

在这个例子中，btnRef并不会指向MyButton内部的那个真实DOM 元素。因为withLogger返回的WithLogger组件并没有“知道”要转发ref。它只是简单地把props传给了WrappedComponent，而ref在React中是一个特殊的属性，它不会被自动作为普通的prop传递下去。

要解决这个问题，你需要让你的HOC也使用React.forwardRef：

import React, { useRef, useEffect } from 'react';

const withLogger = (WrappedComponent) => {
  // HOC现在也使用forwardRef来接收并转发ref
  const WithLogger = React.forwardRef((props, ref) => {
    console.log('Component rendered:', WrappedComponent.displayName || WrappedComponent.name);
    // 将接收到的ref传递给WrappedComponent
    return <WrappedComponent ref={ref} {...props} />;
  });

  WithLogger.displayName = `withLogger(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
  return WithLogger;
};

const MyButton = React.forwardRef(({ onClick, children }, ref) => (
  // MyButton本身也需要能接收ref，并把它附着到DOM上
  <button onClick={onClick} ref={ref}>{children}</button>
));

const LoggedButton = withLogger(MyButton);

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

  useEffect(() => {
    if (btnRef.current) {
      console.log('Ref current:', btnRef.current); // 这时候就会是真实的DOM button了
      btnRef.current.style.backgroundColor = 'lightblue';
    }
  }, []);

  return <LoggedButton ref={btnRef}>点击我</LoggedButton>;
}

export default App;

现在，withLogger HOC内部的WithLogger组件使用了forwardRef，它能够接收到父组件传下来的ref，然后它再把这个ref传递给它所包裹的WrappedComponent（也就是MyButton）。当然，MyButton本身也必须是能够接收并处理ref的组件（即也用forwardRef包裹）。这样，ref的链条才算是完整了。

处理HOC和ref转发时，确保每个环节都正确地转发了ref，这很重要，否则你可能会发现ref.current总是null或者指向了不该指向的东西。这是一个常见的进阶问题，理解它能让你更好地构建可复用的组件。

以上就是《JS中Ref转发与传递详解》的详细内容，更多关于的资料请关注golang学习网公众号！