React相关自定义Hook如何合规分组？求最佳实践方案

为什么类封装的方式不可行 #

React Hooks的核心规则明确要求：所有Hook（包括自定义Hook）必须直接在函数组件或其他自定义Hook的顶层作用域中调用。你尝试用普通类的静态方法包裹useAxios，但类的静态方法不属于函数组件或自定义Hook上下文，因此触发了react-hooks/rules-of-hooks的报错。

推荐的分组方案 #

1. 按模块文件分组（最常用） #

将功能相关的自定义Hook集中放在同一个文件中导出，这是React社区最普遍的做法，结构清晰且符合模块化原则。

示例代码（productHooks.js）：

import { useAxios } from "./useAxios";

// 获取产品列表的自定义Hook
export function useListProduct() {
  const url = "list product API URL";
  return useAxios(null, "get", url);
}

// 添加产品的自定义Hook
export function useAddProduct(product) {
  const url = "add product API URL"; // 修正原示例中的URL错误
  return useAxios(product, "post", url);
}

组件中使用：

import { useListProduct, useAddProduct } from './productHooks';

function ProductManagement() {
  const [listLoading, listData, listError] = useListProduct();
  
  // 注意：原useAddProduct的写法会导致Hook在回调中调用，违反规则，需重构useAddProduct为返回触发函数
  const handleAddProduct = async (newProduct) => {
    // 重构后示例：const [addLoading, addFn] = useAddProduct(); await addFn(newProduct);
  };

  // ...组件渲染逻辑
}

2. 命名空间对象包裹 #

如果希望给相关Hook提供统一的命名空间，可将它们封装在一个对象中导出，但必须保证每个对象成员都是合法的自定义Hook（名称以use开头），严格遵循Hooks调用规则。

示例代码：

import { useAxios } from "./useAxios";

export const ProductHooks = {
  useListProduct() {
    const url = "list product API URL";
    return useAxios(null, "get", url);
  },
  useAddProduct(product) {
    const url = "add product API URL";
    return useAxios(product, "post", url);
  }
};

组件中使用：

import { ProductHooks } from './productHooks';

function ProductPage() {
  const [loading, data, error] = ProductHooks.useListProduct();
  // ...
}

3. 复合Hook（针对关联逻辑） #

如果多个Hook的逻辑紧密关联（比如添加产品后需要刷新列表），可以创建一个复合Hook，将多个相关Hook的逻辑封装在一起，简化组件的调用流程。

示例代码：

import { useListProduct, useAddProduct } from './productHooks';

export function useProductManager() {
  const [listLoading, listData, listError, refreshList] = useListProduct();
  const [addLoading, addProduct, addError] = useAddProduct();

  // 封装添加后自动刷新列表的逻辑
  const addAndRefresh = async (product) => {
    await addProduct(product);
    refreshList();
  };

  return {
    list: { loading: listLoading, data: listData, error: listError, refresh: refreshList },
    add: { loading: addLoading, error: addError, add: addProduct },
    addAndRefresh
  };
}

注：此方案需要先重构useListProduct，使其返回刷新列表的函数，避免重复发起请求的问题。

总结 #

• 禁止用类包裹Hook，违反React Hooks的调用规则；
• 优先选择模块文件分组，符合社区惯例，维护成本低；
• 命名空间对象适合需要组织关联Hook的场景，但需保证每个成员都是合法Hook；
• 复合Hook适用于逻辑紧密关联的场景，可简化组件代码。

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