React导入语句的工作原理：模块定位与编译查找机制

嘿，这个问题问得太戳点了——很多人刚上手React都是直接复制粘贴那两行导入代码就开始写，但很少琢磨背后到底是咋回事，我来给你拆解清楚！

一、react和react-dom模块到底在哪儿？ #

当你通过npm install react react-dom（或者yarn/pnpm）安装依赖后，这两个模块会被下载到项目根目录的node_modules文件夹里：

• node_modules/react：存放React核心库的所有文件，包括编译好的生产/开发版本代码、源码、配置文件等。
• node_modules/react-dom：存放Web平台专属的渲染器代码，负责把React的虚拟DOM变成页面上的真实DOM。

每个模块的package.json里都有个关键字段——main（或者module，针对ES模块），它指定了模块的入口文件。比如React的package.json里，main指向umd/react.development.js（开发环境）或者umd/react.production.min.js（生产环境），这就是编译器实际会加载的核心文件。

二、编译器是怎么找到这些模块的？ #

不管你用Webpack、Vite还是其他打包工具，它们都是遵循Node.js的模块解析规则来找模块的：

• 当你写import React from 'react'时，工具会先检查是不是Node.js的内置模块（显然不是），然后去当前目录下的node_modules里找react文件夹；如果找不到，就往上一级目录的node_modules找，直到找到为止。
• 现在的现代化工具（比如Vite、Webpack 5）会优先读取模块的module字段（ES模块格式），比传统的CommonJS格式更高效，打包出来的代码体积更小。
• 如果你是用CDN方式引入（比如通过script标签加载CDN上的React），那React和ReactDOM会挂载到全局对象window上，此时的导入其实是在取全局变量，但这种方式现在已经很少在项目里用了，大多还是用模块化的方式。

三、导入之后背后的运作机制 #

• import React from 'react'：你拿到的是React的核心跨平台库，它包含了创建虚拟DOM的React.createElement、所有Hook（useState、useEffect等）、类组件的基类Component这些核心API。它不关心你是在Web端还是Native端，只负责帮你构建组件树和状态管理。
• import ReactDOM from 'react-dom'：这是Web平台的专属渲染器，它依赖React核心库，负责把React构建的虚拟DOM转换成浏览器能识别的真实DOM，然后挂载到页面的指定节点上（比如早期的ReactDOM.render，现在的createRoot）。没有它，React的组件就没法在网页上显示出来。

另外提个小细节：React 17及以后的版本，如果你只是写JSX，其实可以不用在每个文件里导入React了——因为JSX转换工具会自动把JSX转换成jsx函数调用，而不是之前的React.createElement。但如果你要用到React的API（比如Hook、React.Fragment），还是得手动导入。

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