React useEffect-在组件中还是在服务中?

我们的组件有一个钩子(服务),它有一个 init() 和一个 shutdown() 功能(出于某种原因)。这个 init() 应至少调用一次以启动(开始心跳操作),并且 shutdown() 停止心跳。

export default function EditProductForm({formToBeModify}: IEditProductClientFormProps): ReactNode {
  const service = useEditProductService();

  useEffect(() => {
    service.init();
    return () => service.shutdown();
  }, []);

 return {
   <div ...>
 }
)

这 useEffect() 足够粘稠,因为它的依赖性是 [] 这意味着 init() 在调用 组件已安装 和 shutdown() 在调用 组件将卸载 .

建议将逻辑插入到组件(.tsx)文件中,但所有内容都应进入服务代码中。在这种情况下,服务将以某种方式如下所示:

export default function useEditProductService() {

   function init() { 
      ...
   }

   function shutdown() {
      ...
   }

   useEffect(() => {
        init();
        return () => shutdown();
      }, []);

  return {
     init,
     shutdown
  }
}

这对我来说并不清楚,因为组件多次重新呈现自己,每次调用服务都是通过 const service = useEditProductService(formToBeModify) 它的工作原理和 使用效果() 留在那里,在组件内部?

我认为,如果它在服务之外,在组件本身中,它的工作方式与我上面描述的一样 init() 和 shutdown() 被调用一次。如果它在服务内部,则在组件生命周期内会调用多次。你怎么认为?