我正在创造一个react context
该上下文将提供一项服务，该服务将订阅一些外部事件以保持更新.因此，为了防止任何泄漏，我必须通过在上下文将被 destruct 时取消订阅来清理此服务.
与useEffect不同的是，我们可以在组件被销毁时返回一个回调，而我不知道如何对上下文做同样的事情.如何做到这一点，或者正确的替代方案是什么？
注意:我的直觉是，我应该在useEffect()中创建一个服务，并将其设置为上下文，但对于看起来像是简单的依赖项注入来说，这似乎很麻烦.
我正在创造一个react context
该上下文将提供一项服务，该服务将订阅一些外部事件以保持更新.因此，为了防止任何泄漏，我必须通过在上下文将被 destruct 时取消订阅来清理此服务.
与useEffect不同的是，我们可以在组件被销毁时返回一个回调，而我不知道如何对上下文做同样的事情.如何做到这一点，或者正确的替代方案是什么？
注意:我的直觉是，我应该在useEffect()中创建一个服务，并将其设置为上下文，但对于看起来像是简单的依赖项注入来说，这似乎很麻烦.
创建一个上下文提供者组件，将您的服务封装在一个useEffect块中.订阅服务通行证后，存储与服务/功能/等相关的状态...您想要为上下文的消费者使用的.
useEffect具有清理功能，当组件卸载时，您可以使用该功能取消订阅:
const ServiceContext = createContext();
const ServiceProvider = ({ children }) => {
const [service, setService] = useState(); // store a reference to the service
useEffect(() => {
// subscribe to service
setService(serviceInstance);
return () => {
// cleanup unsubscribe from service
};
}, []);
return (
<ServiceContext.Provider value={service}>
{children}
</ServiceContext.Provider>
);
}
与问题没有直接关系--我通常在useContext左右添加一个简单的定制钩子包装:
const useService = () => useContext(ServiceContext);
然后在您的组件中:
const service = useService();