将组件逻辑拆分为钩子

Question

我很难想出一种从组件中分离业务逻辑的好方法。由于不同的用例，它变得过于复杂并导致文件很长。我一直在尝试将逻辑拆分为不同的钩子，并单独激活每个钩子。我担心如果我继续添加更多的钩子，我的应用程序将会超载。这些钩子具有导致频繁重新渲染的功能，除了传递标志让它们在一定程度上阻止它们运行之外，我想不出更好的方法来做到这一点，除了将钩子移动到我想要的级别之上避免，因为我想将地图逻辑保留在地图本身中，以避免与获取 google api 数据相关的问题。

有没有更好的方法来组织钩子的使用，同时将它们保持在同一个地方？

我所拥有的或多或少是这样的。数据A和B代表不同的谷歌地图元素。

const App = ( {modality} ) => 
{ 
   const dataA = useHookA(); 
   const dataB = useHookB(); 

   let data;
    switch ( modality)
    {
      case 'A':
        data = dataA;
        break;
      case 'B':
        data = dataB;
        break;
     }

    return <GoogleMap>{data}</GoogleMap>
};

Answer 1

创建2个地图组件，并在它们之间切换：

const MapA = () => {
  const dataA = useHookA();
  
  return <GoogleMap>{data}</GoogleMap>
}

const MapB = () => {
  const dataA = useHookB();
  
  return <GoogleMap>{data}</GoogleMap>
}

const App = ({ modality }) => modality === 'A'
  ? <MapA />
  : <MapB />;