使用 React 钩子的后台服务

Question

我有一个场景，后台服务必须定期调用其余服务。服务必须运行与否的条件是通过存储在上下文中的状态来确定的。我想知道创建/实例化此后台服务的最佳方法是什么。鉴于服务使用钩子，它需要在组件中。

鉴于以下简化结构，我希望将该服务添加到 MyContext 元素中。但是，鉴于服务组件不返回任何内容，react 给了我以下错误"JSX 元素类型'void'不是 JSX 元素的构造函数" - 这对我来说很有意义。

<app>
<MyContext>
<MyBackgroundService />
<MyUi />
</MyContext>
</app>

我不想将所有子组件包装到 MyBackgroundService 元素中。理想情况下，代码应按原样运行。一个可能的解决方案是只返回一个空的React.Fragement元素，但是，它感觉更像是一个肮脏的解决方法。

理想的解决方案是什么？我是否完全走错了路，我是否应该以不同的方式管理后台服务的实例化？如果是这样，如何访问上下文？

Answer 1

你需要构建一个自定义钩子并在App(<app>(组件中调用它。

目前，您有一个使用钩子而不渲染任何东西的组件：

const MyBackgroundService () => {
// useHooks
// No return causes "JSX element type 'void' ..."
// With return without any functionality is useless.
// Memory waste, and loses the functionality of custom hooks
// like returning a value.
// return <></>
}

Answer 2

我建议创建一个自定义钩子来执行您需要的"后台服务"内容：

function useBackgroundService(someStateFromContext) {
const [backgroundService, setBackgroundService] = useState(null)
useEffect(() => {
const bgService = setInterval(() => {
// check the condition for running the background service
// for example, to skip the API call, or whatever
if (someStateFromContext !== 0) {
return
}
callAPI()
.then(() => {
console.log(
`ran bg service with value from context: ${someStateFromContext}`
)
})   
}, 2000)
setBackgroundService(bgService)
// make sure you clean up when you no longer need it,
// for example when component unmounts
function cleanup() {
clearInterval(bgService)
}
return cleanup;
// since this `hook` relies on some value from context
// make sure you include this in your dependency array
// so that a new background service can be created,
// and old one be destroyed, when state from context changes
}, [someStateFromContext])
// optionally, return `backgroundService`
return backgroundService;
}

然后，在您的App组件或其他组件中，只需使用此hook：

// sample context
const MyContext = React.createContext({
count: 0
})
function App() {
const myContext = useContext(MyContext)
useBackgroundService(myContext.count)
return (
<div className="App">
...
</div>
)
}

下面是一个示例的链接：

• 代码沙盒