React中条件传递子组件Ref：将Ref存入Ref是否为合理方案？

当前方案的问题 #

你当前的实现虽然能让父组件A'拿到子组件B的ref，但存在几个明显的问题：

• 违反单向数据流原则：直接修改父组件传入的ref的current属性，相当于在子组件中修改父组件的状态，容易引发不可预测的副作用，比如父组件可能在其他地方依赖该ref的原有值，被覆盖后会出现逻辑错误。
• 缺少清理逻辑：当组件B卸载时，父组件的ref仍然指向旧的apiRef实例，可能导致内存泄漏，或者后续访问时拿到过时的引用。
• 渲染阶段副作用：赋值逻辑放在组件渲染流程中，每次B渲染都会执行判断和赋值，频繁的ref变化可能触发父组件不必要的重新渲染。

更优替代方案 #

方案1：使用forwardRef配合useEffect同步（官方推荐） #

通过React官方的forwardRef让子组件B主动暴露内部ref给需要的父组件，同时用useEffect控制ref的同步时机，避免渲染阶段的副作用，并添加清理逻辑。

代码示例：

import React from 'react';

const B = React.forwardRef((props, ref) => {
  const apiRef = useGridApiRef();

  // 同步ref并处理卸载清理
  React.useEffect(() => {
    if (!ref) return;

    // 兼容对象式ref和函数式ref
    if (typeof ref === 'function') {
      ref(apiRef);
    } else {
      ref.current = apiRef;
    }

    // 组件卸载时重置ref
    return () => {
      if (typeof ref === 'function') {
        ref(null);
      } else {
        ref.current = null;
      }
    };
  }, [ref, apiRef]);

  // 组件业务逻辑
  return <div>子组件B内容</div>;
});

// 父组件A使用（无需传ref）
function A() {
  return (
    <div>
      <B />
    </div>
  );
}

// 父组件A'使用（传递ref）
function APrime() {
  const parentApiRef = React.useRef(null);

  // 可通过parentApiRef.current访问B的apiRef
  return (
    <div>
      <B ref={parentApiRef} />
    </div>
  );
}

方案2：通过props传递回调函数获取ref #

如果不想使用forwardRef，可以让需要ref的父组件A'通过props传递一个回调函数，子组件B在合适的时机将内部ref传递给这个回调。

代码示例：

import React from 'react';

const B = ({ onApiRefReady }) => {
  const apiRef = useGridApiRef();

  React.useEffect(() => {
    if (onApiRefReady) {
      onApiRefReady(apiRef);
    }

    return () => {
      if (onApiRefReady) {
        onApiRefReady(null);
      }
    };
  }, [onApiRefReady, apiRef]);

  // 组件业务逻辑
  return <div>子组件B内容</div>;
};

// 父组件A使用（无需传回调）
function A() {
  return (
    <div>
      <B />
    </div>
  );
}

// 父组件A'使用（传递回调）
function APrime() {
  const [apiRef, setApiRef] = React.useState(null);

  // 可通过apiRef变量访问B的apiRef
  return (
    <div>
      <B onApiRefReady={setApiRef} />
    </div>
  );
}

总结 #

优先选择方案1，它完全符合React的设计规范，是官方推荐的ref传递方式；如果需要更灵活的ref传递逻辑（比如同时传递多个实例引用），可以考虑方案2。两种方案都解决了当前实现中的副作用和内存泄漏问题，逻辑更健壮。

内容的提问来源于stack exchange，提问作者TheKalashnikov