为什么create-react-app的index.js可在ReactDOM.render外解析JSX

你观察到的现象核心原因是：JSX的解析编译和ReactDOM.render的页面渲染是完全独立的两个流程，二者没有依赖关系。

具体逻辑拆解 #

• JSX是React专属的语法扩展，浏览器本身无法直接识别执行。create-react-app内置的Babel转译工具会在代码打包的编译阶段，就把所有符合语法规范的JSX代码统一转换成标准JavaScript代码。你代码中任意位置写的<div>test</div>，都会被转译为React.createElement('div', null, 'test')的调用，执行后返回一个普通JS对象（也就是React元素对象，包含type、props等属性，就是你控制台打印出来的内容）。这个转译过程只校验JSX语法是否合法，完全不关心JSX写在代码的哪个位置，和后续有没有调用ReactDOM.render没有任何关系。
• ReactDOM.render的作用只有一个：把已经生成好的React元素对象转换成真实DOM节点，挂载到你指定的页面容器上。它只负责运行时的渲染逻辑，压根不参与JSX的语法解析工作。你示例里的jsxArray在代码运行到赋值语句的时候，就已经是三个转译完成的React元素对象了，自然可以正常被打印输出。

你可以做个简单验证：把代码里的ReactDOM.render调用整段删除再运行项目，控制台依然会正常输出jsxArray的内容，只是页面没有渲染内容变成空白，就能直接证明二者是解耦的。

示例代码（index.js） #

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

const jsxArray = [
    <div>test</div>,
    <div>test</div>,
    <div>test</div>
];

console.log(jsxArray);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

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