React无需import语句即可从其他组件引入对象的实现原理是什么？

我目前正在学习React.js。

通常要在不同.js文件中使用组件时，需要将对应组件导入到当前工作文件中。但我在开发一个简单网站时，无需导入App.js中的对象就能在其他文件中直接使用，我不清楚为什么不需要显式声明导入，如果不执行导入操作，React是如何识别我引用的内容的？

以下是运行效果和各组件的截图，红色虚线标注的就是我提到的相关内容：

如下图中的注释所说，我不清楚这个文件是如何获取到App.js中的对象的：

顺便说明，Expenses元素是其他内容，我也附上了对应截图供参考：

感谢阅读！🥰

这种情况通常是以下几种原因导致的：

• 全局对象挂载：你可能在App.js中把要共享的对象直接挂载到了浏览器的window全局对象上，比如window.appConfig = yourObject，所有运行在同页面上下文的JS文件都可以直接读取window下的属性，不需要导入。
• 非模块化开发模式：如果你没有使用ES模块化规范（即没有给script标签加type="module"属性，也没有用webpack/Vite等构建工具做模块化打包），JS文件是按页面引入顺序加载的，App.js中在全局作用域定义的变量/对象，会在后续加载的JS文件的全局作用域中直接可访问。
• Context API 隐式传递：如果你在App.js中用React Context的Provider包裹了后代组件，后代组件只需要调用useContext就可以拿到Provider注入的对象，不需要显式导入App.js里的原始对象。
• 构建工具自动注入：如果你的项目配置了webpack.ProvidePlugin或者Vite的自动导入插件，构建工具会在编译阶段自动给所有模块注入你配置的对象，不需要手动写import语句。

你可以按优先级排查：先看App.js里有没有给window赋值的代码，再看你的项目是否开启了ES模块化，其次检查有没有用Context相关的API。

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