能否将React自定义Hook封装在JavaScript类中使用？是否属于反模式？

直接说结论：这种写法属于反模式，严重违反React Hook规则，绝对不能这么用。

为什么不能这么做？ #

React Hook有两条必须严格遵守的核心规则：

• 只能在函数组件的顶层，或者自定义Hook的顶层调用Hook
• 禁止在循环、条件语句、嵌套函数（包括类的方法）里调用Hook

你的代码里，useCounter和useToggle是类的实例方法，调用useState时相当于在类方法内部执行Hook，这直接破坏了React维护组件状态的机制。React依赖Hook的调用顺序来精准追踪每个组件的状态关联，类方法的调用方式会打乱这个顺序，最终导致状态丢失、渲染异常等难以排查的问题。

解决“不用每个Hook单独建文件”的需求 #

想把多个自定义Hook放在一起，根本不需要用类，有两种合规且简洁的方式：

方式1：单文件导出多个Hook #

在一个文件里定义所有自定义Hook，然后分别导出：

// hooks.js
export function useCounter() {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  return { count, increment, decrement };
}

export function useToggle(initialState = false) {
  const [state, setState] = React.useState(initialState);
  const toggle = () => setState(!state);
  return { state, toggle };
}

使用时按需导入即可：

import { useCounter, useToggle } from './hooks';

const Counter = () => {
  const { count, increment, decrement } = useCounter();
  // ...组件渲染逻辑
};

方式2：用普通对象包裹导出（可选） #

如果想要类似命名空间的调用方式，可以用普通对象包裹Hook导出（别用类）：

// hooks.js
export const CustomHooks = {
  useCounter() {
    const [count, setCount] = React.useState(0);
    const increment = () => setCount(count + 1);
    const decrement = () => setCount(count - 1);
    return { count, increment, decrement };
  },
  useToggle(initialState = false) {
    const [state, setState] = React.useState(initialState);
    const toggle = () => setState(!state);
    return { state, toggle };
  }
};

使用时：

import { CustomHooks } from './hooks';

const Toggler = () => {
  const { state, toggle } = CustomHooks.useToggle();
  // ...组件渲染逻辑
};

这种方式既满足了“不用分多个文件”的需求，又完全符合Hook规则。

总结 #

类的写法违反Hook核心规则，属于反模式；用单文件多导出或普通对象包裹，才是正确组织自定义Hook的方式。

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