REACT-多用效应中的种族条件清理功能

Question

我有一个组件，可以

1. 在MOUNT上启动WebSocket Ref（endpoint prop不会更改）。
2. 当组件进入屏幕视图时，它调用subscribe on wsref << /code>
3. 当组件删除屏幕视图时，它调用unsubscribe on wsref

问题是在uncount> uncount上，第二个清理功能失败了，因为我们已经通过第一个清理功能关闭了Websocket。

因此，我们无法退缩，因为Websocket不在open状态中。

如何控制这里的清理效果顺序？

function Comp({endpoint, isVisible, id}) {
  const wsRef = useRef(null);
  useEffect(() => {
    wsRef.current = new WebsocketClass(endpoint);
    return () => {              // [1] cleanup no 1
      wsRef.current.close();
      wsRef.current = null;
    }
  }, [endpoint]);


  useEffect(() => {
    if (isVisible) {
      wsRef.current.subscribe(id);
    }
    return () => {
      if (isVisible) {
        wsRef.current.unsubscribe(id); // [2] fails, this cleanup runs after [1]
      } 
    }
  }, [isVisible, id]);

}

如果我在功能中重新订购两个使用效果，问题似乎消失了，但是这里真的是一个永久的解决方案吗？

另外，我不能关闭 unbubscribe清理中的Websocket，因为该组件可以在屏幕上熄灭时保持安装并在用户来回滚动时再次返回。