有没有办法将钩子组合在一起以便在react中的类似组件中重用？

Question

我有一个 React 和下一个项目，它使用具有类似结构的多个页面。在每个页面中，我们都使用自定义挂钩来加载数据，因此它看起来像：

  const theme = useTheme()
  const router = useRouter()
  const { state, dispatch } = useContext(Context)
  const { config, metaData } = router.query
  const getQueryPath1 = router.query.path1
  const getQueryPath2 = router.query.path2
  const { siteConfig } = useSiteConfig()
  const { partnerAgency } = usePartnerAgency(siteConfig?.agency_prop)
  const { partnerParameters } = usePartnerParameters()
  const { forms } = useForms(partnerParameters, metaData)
  const environment = useEnvironment()

等等。

由于我们在多个组件（实际上是 next.js 12 页）中使用了大部分钩子/配置，我想知道是否有一种策略可以将这些钩子/配置组合在一个父钩子或伞钩下。当然，这感觉非常违背钩子的预期用途，但必须有一种方法来减少代码中的重复。

我尝试创建一个自定义组件来利用所有这些钩子，但它最终不太可配置，并且没有达到减少重复的预期结果。

如有任何建议，我们将不胜感激 - 提前致谢。

Answer 1

您可以将所有常见的钩子移动到自定义钩子中，以整理页面组件并使整个声明shebang可重用。

const useCommonHooks = () => {
  const theme = useTheme()
  const router = useRouter()
  const { state, dispatch } = useContext(Context)
  const { config, metaData } = router.query
  const getQueryPath1 = router.query.path1
  const getQueryPath2 = router.query.path2
  const { siteConfig } = useSiteConfig()
  const { partnerAgency } = usePartnerAgency(siteConfig?.agency_prop)
  const { partnerParameters } = usePartnerParameters()
  const { forms } = useForms(partnerParameters, metaData)
  const environment = useEnvironment()
  return {
    theme,
    router,
    state,
    dispatch,
    config,
    metaData,
    getQueryPath1,
    getQueryPath2,
    siteConfig,partnerAgency,
    partnerParameters,
    forms,
    environment,
  }
}

用法

const {
    theme,
    router,
    state,
    dispatch,
    config,
    metaData,
    getQueryPath1,
    getQueryPath2,
    siteConfig,partnerAgency,
    partnerParameters,
    forms,
    environment,
  } = useCommonHooks()

但这不是灵丹妙药；我通常只将事物放在具有强内聚力的自定义挂钩中 - 此处情况并非如此，它们实际上相当不相关，并且只有一个共同点：通常都由典型的页面组件使用。 请注意，这会降低您的灵活性；使用这种方法，您不能省略页面上并不真正需要的钩子，或者例如交换表单钩子。 而且它有 12 个属性，也相当笨重。

我可能会接受大多数页面组件在最顶部都有一个复制粘贴的钩子声明块。甚至可以用注释括号将其包围，以清楚地表明该块是共享的。

// -------- common page hooks --------
// please add a comment here if this page
// deviates in anything within this common block
  const theme = useTheme()
  const router = useRouter()
  const { state, dispatch } = useContext(Context)
  const { config, metaData } = router.query
  const getQueryPath1 = router.query.path1
  const getQueryPath2 = router.query.path2
  const { siteConfig } = useSiteConfig()
  const { partnerAgency } = usePartnerAgency(siteConfig?.agency_prop)
  const { partnerParameters } = usePartnerParameters()
  const { forms } = useForms(partnerParameters, metaData)
  const environment = useEnvironment()
// -------- common page hooks --------