React Hooks违规使用无运行时报错的原因及判定规则是什么？

首先我们先明确两个独立的校验逻辑：你看到的「违规提示」分两种，一种是ESLint静态检查报错，另一种是React运行时抛出的错误，二者的判定逻辑完全不一样。 #

1. ESLint 静态校验规则（就是你看到的lint报错的来源） #

官方提供的eslint-plugin-react-hooks插件是靠命名约定做静态判断的：

• 只要函数名以use开头，就会被识别为自定义Hook，内部调用Hook是合法的
• 其他不以use开头的普通函数，内部调用Hook直接判定为违规
  这部分扫描是代码编译阶段做的，和React运行时没有任何关系，你示例里的getTheThing、getTheThingState因为名字不符合自定义Hook的命名要求，所以会报lint错误。

2. React 运行时的Hook合规判定逻辑 #

React本身完全不关心你调用Hook的函数叫什么名字，它只会校验调用Hook的时机是否处于正在渲染的函数组件/自定义Hook的上下文内。
React内部是通过一个全局的调度器变量dispatcher来控制的：

• 当React开始渲染某个函数组件/自定义Hook前，会把dispatcher切换为合法的Hook处理对象，此时所有Hook调用都会正常执行
• 渲染流程结束后，React会立刻把dispatcher切换为会抛出错误的对象，此时调用Hook就会触发运行时报错
  你提供的示例代码能正常运行的原因很简单：getTheThing是在Child组件的渲染流程中被调用的，调用Hook的时机刚好处于Child组件的渲染上下文内，React感知不到你套了一层普通函数调用，所以不会抛错。

3. 什么情况下会触发运行时的Hook违规错误？ #

只有当Hook调用发生在React渲染上下文之外时，才会抛出运行时错误，常见场景包括：

• 在事件回调函数中调用Hook（比如按钮点击的onClick回调里调用useState）
• 在异步任务回调中调用Hook（比如setTimeout、接口请求的回调里调用Hook）
• 在类组件的生命周期方法、构造函数中调用Hook
• 在组件渲染流程外的普通工具函数中调用Hook

4. 关于你提到的「首字母大写改组件」的修复方案 #

这个操作本质上是两种不同的用法，不要混淆：

• 如果你只是把getTheThing改名为GetTheThing，还是用const theThing = GetTheThing()的方式调用，本质还是普通函数调用，依旧属于违规用法，和之前没有区别
• 只有你把它当做组件用<GetTheThing />的方式渲染时，React才会接管它的渲染流程，内部的Hook调用归属到GetTheThing组件的渲染上下文，才是合法的用法

注意：你示例中的代码虽然能正常运行，但属于不符合规范的写法，后续维护很容易出问题。比如你如果在条件判断里调用getTheThing，就会直接破坏Hook的固定调用顺序，导致状态错乱、渲染异常，这也是为什么ESLint插件要把这种写法直接标为错误的核心原因。

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