React中render()底层原理及类组件实例重复创建疑问

1. 使用<Counter/>时，React的处理逻辑 #

当你在JSX中写<Counter/>时，React会创建Counter类组件的实例，而不是仅获取render方法里的JSX。具体流程是：

• 先实例化Counter类（调用constructor）
• 执行类组件的生命周期方法
• 调用实例的render方法获取JSX
• 将JSX转换为真实DOM并渲染到页面

类组件的constructor、生命周期钩子都会按正常流程执行，不是只取render的输出。

2. constructor打印两次"hello"的原因 #

这不是因为创建了两个实例，而是开发环境下React严格模式（Strict Mode）的刻意行为。

在严格模式中，React会重复调用一些方法（包括constructor、render、componentWillMount等），目的是帮你检测代码中是否存在意外的副作用（比如在constructor里修改全局状态、发起异步请求等）。这种重复调用只在开发环境生效，生产环境下会自动取消，只会执行一次。

你可以检查index.js中的代码，是不是用<React.StrictMode>包裹了<Counter/>，类似这样：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Counter />
  </React.StrictMode>
);

如果是，去掉<React.StrictMode>标签，开发环境下constructor就只会打印一次"hello"了。

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