主App函数组件中使用useState为何报Invalid hook call错误

主组件和子组件在Hook使用规则上不存在任何特殊差异，你触发Invalid hook call错误的核心原因是错误地手动执行了App组件函数，没有让React接管组件的渲染流程。

看你Main.jsx里的第一行代码：

const app = App();

这行代码直接手动调用了App函数，此时函数内部的useState是在普通JavaScript函数调用上下文里执行的，完全脱离了React的渲染调度周期——React执行组件渲染时会维护专属的上下文环境，用来关联Hook和对应组件的fiber节点、存储Hook状态，手动调用组件时这个上下文根本不存在，Hook无法正常工作就会抛出错误。
你之前的子组件能正常运行，本质是因为子组件是通过JSX写法交由React渲染的，没有手动调用子组件函数。

删除手动调用App()的代码，直接给render方法传入JSX格式的组件，让React负责组件的创建、渲染全流程：

const appCont = crEl('div');
document.body.appendChild(appCont);
const reactRoot = createRoot(appCont);
// 传入<App />而非手动调用App得到的返回值
reactRoot.render(<App />);

补充：你已经排除了另外两个常见的触发该错误的原因：

• react与react-dom版本不一致（你使用的两个包版本均为18.1.0，符合要求）
• 违反Hook基础规则（比如在条件判断、循环、普通工具函数中调用Hook，你组件内useState写法本身没有问题）

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