使用ref回调保存子组件到数组时，如何在卸载时清理子组件？

嘿，这个问题我之前在做组件集合管理的时候也踩过坑！咱们来拆解一下怎么解决它～

方案1：让子组件主动触发取消订阅（最直观） #

这个思路就是你一开始想的，给子组件传递取消订阅方法，但不用纠结存储位置——直接让子组件在自己的卸载生命周期里调用这个方法就行：

父组件代码 #

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.subscribers = new Set();
  }

  // 生成取消订阅的方法，并绑定到子组件实例
  handleChildRef = (childInstance) => {
    if (childInstance) {
      // 创建当前子组件专属的取消订阅函数
      const unsubscribe = () => {
        this.subscribers.delete(childInstance);
      };
      // 把方法挂载到子组件实例上，也可以通过props传递
      childInstance.unsubscribe = unsubscribe;
      this.subscribers.add(childInstance);
    }
  };

  render() {
    return (
      <div>
        {React.Children.map(this.props.children, (child) => {
          return React.cloneElement(child, { ref: this.handleChildRef });
        })}
      </div>
    );
  }
}

子组件代码 #

如果是类组件：

class Child extends React.Component {
  componentWillUnmount() {
    // 组件卸载时主动调用取消订阅
    if (this.unsubscribe) {
      this.unsubscribe();
    }
  }

  // ... 子组件其他业务逻辑
}

如果是函数组件，用useEffect的清理函数：

function Child(props) {
  // 利用useEffect的清理机制，组件卸载时自动执行
  useEffect(() => {
    return () => {
      if (props.unsubscribe) {
        props.unsubscribe();
      }
    };
  }, [props.unsubscribe]);

  // ... 子组件其他业务逻辑
}

这个方案的好处是逻辑清晰，子组件自己管理卸载时的清理，父组件只需要负责订阅和提供取消方法。

方案2：利用Ref回调的闭包特性（无需修改子组件） #

如果你不想给子组件加额外逻辑，可以在父组件的Ref回调里用闭包记住每个子组件的实例，当组件卸载触发Ref回调传null时，自动移除订阅：

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.subscribers = new Set();
  }

  render() {
    return (
      <div>
        {React.Children.map(this.props.children, (child) => {
          // 为每个子组件创建独立的Ref回调，闭包保存当前实例
          let currentChild = null;
          const refCallback = (instance) => {
            if (instance) {
              currentChild = instance;
              this.subscribers.add(instance);
            } else {
              // 组件卸载时，从集合中移除之前保存的实例
              if (currentChild) {
                this.subscribers.delete(currentChild);
                currentChild = null;
              }
            }
          };

          return React.cloneElement(child, { ref: refCallback });
        })}
      </div>
    );
  }
}

这个方案的妙处在于，每个子组件的Ref回调都是独立的闭包，里面的currentChild会记住对应的子组件实例，当组件卸载时Ref回调收到null，就能精准找到要移除的对象，完全不需要子组件配合。

为什么你之前会纠结存储位置？ #

其实你一开始的思路是对的，只是没找到最顺畅的触发时机——要么让子组件在卸载时主动调用（方案1），要么利用Ref回调的闭包自动关联实例和卸载事件（方案2），不需要额外找地方存取消方法，逻辑都能闭环。

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