为什么无法在类与函数外部全局使用React State Hooks

严格满足「不新建任何自定义类、不新建任何自定义函数，仅依赖沙箱预置的React、ReactDOM及ReactDOM.render基础API」的约束时，完全无法完成带状态组件的适用性测试，没有任何可行的绕路方案。

无法实现的根本原因 #

• 带状态组件的运行机制，从React的设计逻辑上就要求必须依附于自定义组件实体存在：
  • 类组件需要你通过class 自定义标识 extends React.Component创建独立类才能定义，这直接触碰了“不新建自定义类”的约束红线
  • 就算是用Hooks实现的函数组件，也需要独立定义一个自定义函数来承载状态逻辑、返回对应JSX，同样属于被禁止的“新建自定义函数”范畴
• 你就算尝试把状态逻辑、事件回调全塞到传给ReactDOM.render的JSX参数里绕开组件定义，也根本跑不通：
  ReactDOM.render接收的第一个参数是纯UI描述用的React元素对象，本身不具备持有组件状态、触发重渲染的能力。哪怕你在元素属性里写了点击回调，也没有合法的位置存储状态值、更没有机制在状态变更后触发DOM更新——毕竟React的状态挂载、更新触发流程，从一开始就是设计在自定义组件的生命周期链路里的。更别说你想直接在传参的时候调用useState这类内置Hook，会直接违反Hook的调用规则抛出运行时错误：所有内置Hook的合法调用位置，只能是自定义函数组件、自定义Hook内部，没有办法在根渲染参数链里直接调用。
• 有人会提到用React.createElement直接拼元素来测，但拼出来的依然是无状态的静态DOM描述。React官方内置的所有通用组件（比如Fragment、StrictMode、Suspense）都只是无业务逻辑的通用容器，根本没有预留可以挂载自定义测试状态的内置入口，完全没法用来验证你自己写的状态逻辑的实际运行表现。

常见认知偏差 #

不少人觉得“不单独写组件类/函数，直接把带状态的JSX传给ReactDOM.render就算测试”，但这种平铺写法本质上只是把所有逻辑堆在根节点上，完全没有复现真实项目里组件的状态隔离、生命周期触发、跨层级更新传播的运行逻辑，测出来的结果和你把状态逻辑封装成独立组件的实际表现偏差极大，根本达不到测试适用性的目的。

内容的提问来源于stack exchange，提问作者Dhana D.