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

Question

我们的组件有一个钩子（服务），它有一个

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)

调用服务时，它的工作方式是否与

useEffect()

保留在组件内部一样？

我认为如果它在服务之外，在组件本身中，它的工作原理就像我上面描述的那样，

init()

和

shutdown()

被调用一次。如果它位于服务内部，则在组件生命周期内会多次调用它。你觉得怎么样？

Answer 1

这与直接在一个或多个组件中运行效果相同。自定义 React hooks 的主要目的是代码重用。

而不是在每个使用“服务”的组件中编写以下内容

function init() { 
  ...
}

function shutdown() {
  ...
}

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

您只需在其位置使用

useEditProductService

挂钩即可。

useEditProductService();

• 您减少了需要编写的代码量
• 代码比较多DRY
• 如果需要更新逻辑，只需在一个位置更新即可 而不是在应用程序中使用它的每个地方