React与Next.js中如何组合钩子实现相似页面逻辑复用？

首先明确：自定义钩子就是React官方用来复用组件间状态逻辑的方案，你的需求完全贴合这个场景，之前的组件方案灵活性差，换成钩子就解决了。

1. 基础版整合钩子 #

把所有重复的钩子调用封装到一个自定义钩子里，同时保留可配置项，避免一刀切的封装：

// hooks/usePageDependencies.js
import { useTheme } from 'your-theme-lib';
import { useRouter } from 'next/router';
import { useContext } from 'react';
import Context from '../contexts/YourContext';
import useSiteConfig from './useSiteConfig';
import usePartnerAgency from './usePartnerAgency';
import usePartnerParameters from './usePartnerParameters';
import useForms from './useForms';
import useEnvironment from './useEnvironment';

export const usePageDependencies = ({ includeForms = true } = {}) => {
  // 基础钩子调用
  const theme = useTheme();
  const router = useRouter();
  const { state, dispatch } = useContext(Context);
  
  // 解析路由参数
  const { config, metaData, path1: getQueryPath1, path2: getQueryPath2 } = router.query;
  
  // 依赖链式钩子
  const { siteConfig } = useSiteConfig();
  const { partnerAgency } = usePartnerAgency(siteConfig?.agency_prop);
  const { partnerParameters } = usePartnerParameters();
  
  // 可配置项：按需加载forms
  const { forms } = includeForms ? useForms(partnerParameters, metaData) : { forms: null };
  
  const environment = useEnvironment();

  // 返回所有需要的变量
  return {
    theme,
    router,
    state,
    dispatch,
    config,
    metaData,
    getQueryPath1,
    getQueryPath2,
    siteConfig,
    partnerAgency,
    partnerParameters,
    forms,
    environment
  };
};

2. 页面中的使用方式 #

在任意页面组件里，只需要一行代码就能拿到所有需要的变量，还能根据页面需求调整配置：

// pages/YourPage.js
import { usePageDependencies } from '../hooks/usePageDependencies';

const YourPage = () => {
  // 默认加载所有内容
  const {
    theme,
    state,
    dispatch,
    config,
    forms,
    environment
  } = usePageDependencies();

  // 如果某个页面不需要forms，传入配置关闭
  // const { ... } = usePageDependencies({ includeForms: false });

  // 页面逻辑...
  return <div>...</div>;
};

export default YourPage;

3. 进阶优化：支持更多动态配置 #

如果不同页面需要修改某些钩子的参数（比如usePartnerAgency的入参），可以给整合钩子增加自定义参数：

// 优化后的usePageDependencies
export const usePageDependencies = ({ 
  includeForms = true,
  customAgencyProp = null // 允许自定义传入agency_prop
} = {}) => {
  // ... 前面代码不变
  const agencyProp = customAgencyProp ?? siteConfig?.agency_prop;
  const { partnerAgency } = usePartnerAgency(agencyProp);
  // ... 后面代码不变
};

// 页面中使用自定义参数
const { partnerAgency } = usePageDependencies({
  customAgencyProp: 'custom-value'
});

为什么这个方案可行？ #

• 完全符合React钩子的设计规则：自定义钩子就是用来提取组件间重复的状态逻辑，只要在组件顶层调用就没问题。
• 灵活性远超组件封装：可以通过配置项按需加载不同的钩子，还能动态修改钩子参数，适配不同页面的需求。
• 减少重复代码：每个页面不用再写一堆钩子调用，只需要一行代码引入整合钩子。

内容的提问来源于stack exchange，提问作者DMQuinn