React中如何导出调用同文件未导出函数的默认函数？

这事儿本质跟React关系不大，核心是ES模块（ES Modules）的标准机制在工作，咱们拆解来看：

1. 未导出的函数为啥能被调用？ #

每个JS/JSX文件都是一个独立的模块，拥有自己的私有作用域。同一个模块里声明的所有函数、变量，不管有没有导出，都共享这个作用域——你导出的默认组件函数，和那个未导出的工具函数属于同一个“作用域圈子”，所以它能直接调用后者，根本不需要React“找”，这是JS本身的作用域规则在生效。

举个实际代码例子：

// 模块内部私有函数，没写export
function formatPrice(price) {
  return `¥${price.toFixed(2)}`;
}

// 导出的默认组件函数
export default function ProductCard({ price }) {
  // 直接调用同模块的私有函数，完全没问题
  const displayPrice = formatPrice(price);
  return <div>价格：{displayPrice}</div>;
}

2. 导出操作会把依赖一并导出吗？ #

不会“导出”私有依赖，但会把依赖的实现包含在模块执行逻辑里：

• 当你在App.js里用import ProductCard from './ProductCard.jsx'导入组件时，打包工具（比如Webpack、Vite）或者浏览器的ES模块加载器，会加载整个模块的代码并执行：
  1. 先创建模块的私有作用域，声明formatPrice函数；
  2. 再创建ProductCard函数，它通过闭包“捕获”了当前作用域里的formatPrice；
  3. 最后把ProductCard作为默认导出暴露给外部。
• 但外部模块（比如App.js）完全看不到formatPrice，它是模块内部的私有成员——你没法在App.js里直接调用formatPrice，因为它没被export。

3. 再理清楚export/import的核心逻辑 #

• 模块作用域隔离：每个文件是独立的模块，内部变量默认对外不可见，只有通过export声明的成员才能被外部访问；
• 导出的本质：不是复制函数/变量，而是对外暴露一个引用。外部导入时，拿到的是模块内部成员的引用（ES模块是动态绑定的，不过日常开发中对函数这类值感知不强）；
• 依赖处理逻辑：打包工具会分析模块间的依赖链，把所有用到的模块代码打包到一起（浏览器则按顺序加载），但私有成员始终只在模块内部生效，不会被暴露出去；
• React的角色：React只是在渲染导入的组件时，执行这个组件函数而已——组件能调用内部私有函数，完全是JS作用域和闭包的功劳，React没额外做什么“查找”操作。

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