reactjs - 使用 React hooks 的后台服务

Question

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

鉴于以下简化结构，我希望将服务添加到 MyContext 元素中。但是，考虑到服务组件不返回任何内容，React 会给我以下错误“JSX 元素类型‘void’不是 JSX 元素的构造函数”——这对我来说很有意义。

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

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

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

Answer 1

您需要build a custom hook并在 App 内调用它( <app> ) 组件。

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

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 <></>
}