React类组件何时实例化？为何找不到手动实例化代码？

你在代码里找不到手动调用new Counter()的逻辑是正常的，类组件的实例化是React框架在底层自动完成的，不需要开发者手动编写实例化代码，具体逻辑和触发时机如下：

• JSX里写的<Counter />首先会被Babel编译为React.createElement(Counter, props)调用，这一步只会生成描述组件的普通JS对象（即React元素），还没有执行实例化。
• 真正的实例化发生在React首次挂载组件的协调阶段：当React遍历虚拟DOM树，识别到当前节点为Counter类组件、需要渲染到真实页面时，会在内部自动执行new Counter(传入的props)生成组件实例，之后会按顺序调用实例的constructor构造函数、render方法，等真实DOM挂载完成后再触发componentDidMount等生命周期钩子。
• 你可以自行验证这个逻辑：在Counter类的构造函数中添加一行控制台打印，组件第一次渲染到页面时，控制台就会输出对应内容，这就是React自动触发实例化的节点。

注意：不要手动调用new Counter()生成实例，这种脱离React生命周期和状态管理体系的实例无法正常工作。

相关参考截图：

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