关于在useEffect()回调中附加处理程序时丢失事件的风险

Question

我担心在useEffect()回调中附加侦听器，可能会错过一些事件。

以文档为例：

import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}

让我们假设在FriendStatus组件之后触发好友状态更改事件在CCD_ 3被调用之前被实例化
在这种情况下，例如：

function App() {
Promise.resolve().then(()=> ChatAPI.postFriendStatus({ "id": 42, "isOnline": true }));
return (<FriendStatus firend={{ "id": 42 }}) />);

}

然后我们错过了活动，FriendStatus保持"正在加载…"永远

非常感谢对此事的任何意见！

Answer 1

是。这是一个热态与冷态可观察性的问题。

为了实现这一点，您应该在ChatAPI(Observable(中缓冲一定数量的事件(可能只有一个(，并为每个新订阅重播缓冲的事件。

请参阅https://rxjs-dev.firebaseapp.com/api/index/class/BehaviorSubject作为理念。