TypeScript中能否将自定义React Hook实现为类方法？

函数式实现尝试 #

function useMyCustomHookFunction(){
    return useState("this-is-a-test-1");
}

使用示例：

const [test1, setTest1] = useMyCustomHookFunction()

return (
    <>
         <p>From function: {test1}</p>
    </>
)

运行正常，输出：

From function: this-is-a-test-1

类+方法式实现尝试 #

class TestHook {

    private initialValue = "this-is-a-test-2"
    
    public useMyCustomHookMethod(){
        return useState(this.initialValue);
    }

}

使用示例：

const testInstance = new TestHook()
const [test2, setTest2] = testInstance.useMyCustomHookMethod()

return (
    <>
        <p>From method: {test2}</p>
    </>
)

运行正常，输出：

From method: this-is-a-test-2

遇到的问题 #

两种实现均可正常运行，但类方法式写法触发ESLint错误：

React Hook "useState" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

我并未使用类组件，也未找到关于用TypeScript普通类实现Hook的相关资料，不清楚这种写法是否存在实际问题，还是ESLint误判？（注：这是极简测试代码，实际场景会用到更多React及第三方Hook，如useEffect、useMutation等）

解答 #

这不是ESLint误判，你的写法违反了React Hooks的核心规则。

React Hooks规则明确要求：自定义Hook必须是以use开头的纯函数，且调用时必须直接在函数组件或其他自定义Hook的顶层作用域执行。

类方法写法存在以下实际问题：

• Hook调用顺序无法保证：若类实例被多次创建，或类方法在组件的条件分支/循环中调用，会破坏Hooks的调用顺序一致性，导致React无法正确跟踪状态。
• 不符合Hook设计意图：Hooks旨在在函数组件中复用状态逻辑，类的方式会引入不必要的实例化开销，且无法与React的Hook调度机制完美兼容——比如后续使用useEffect这类依赖组件生命周期的Hook时，类方法的调用上下文可能导致副作用执行异常。
• ESLint规则检测逻辑：react-hooks/rules-of-hooks会检查调用Hook的函数是否符合自定义Hook的命名规范（以use开头的函数），类方法不属于该范畴，因此触发错误。

即便当前极简代码能运行，复杂场景下必然会出现状态异常、副作用执行错误等难以排查的问题。正确做法是遵循React官方规范，用纯函数实现自定义Hook。

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