在 React 中多次导入模块。代码是执行一次还是执行多次答案

【问题标题】：Import module in React several times. Is the code executed once vs executed multiple times在 React 中多次导入模块。代码是执行一次还是执行多次
【发布时间】：2021-04-19 16:23:18
【问题描述】：

一切都始于需要在函数调用中进行配置，并弄清楚如果导入多个文件会发生什么。

我有这个功能

function.js
export function myFunction() {
  let b = Math.random();
  return b;
}

两种情况。直接导入函数，在多处展示。显示不同的值。第一种情况

App.js
import myFunction from "./myFunction";
export default class App extends Component {
  render() {
    return (
      <div className="App">
        <h3>{myFunction()}</h3>
        <h3>{myFunction()}</h3>
      </div>
    );
  }
}

第二种情况。

counter.js
import myFunction from "./myFunction";
export default myFunction(7)

App.js
import counter1 from "./counter";
import counter2 from "./counter";

export default class App extends Component {
  render() {
    return (
      <div className="App">
        <h3>counter1</h3>
        <h3>counter2</h3>
      </div>
    );
  }
}

在第二种情况下，显示相同的值。

这里有一篇文章：https://dmitripavlutin.com/javascript-module-import-twice/ 仍然无法完全解释会发生什么

【问题讨论】：

标签： javascript reactjs import module

【解决方案1】：

在第一种情况下，对myFunction 有两个单独的调用，
也就是说对Math.random() 的两次单独调用（考虑到它的实现）。

在第二种情况下，counter1 和 counter2 引用同一个 './counter' 模块实例。
这个实例公开了一个常量（即：myFunction(7)）在模块实例化时初始化：

当读取import counter1 from './counter'; 语句时：
- 查看'./counter' 模块是否已被评估
- 因为不是这样，它评估'./counter' 模块
- 此时，常量myFunction(7) 已创建（假设它等于0.12345）
  并公开为'./counter' 模块实例的default 导出
- 然后，在 App.js 中，counter1 变量采用值 0.12345
当读取import counter2 from './counter'; 语句时：
- 查看'./counter' 模块是否已被评估
- 由于它已经使用相同的路径导入/评估，
  它返回相同的现有 './counter' 模块实例
- 它查看其default 导出，即0.12345
- 因此，在 App.js 中，counter2 变量也采用值 0.12345

这就是显示相同值的原因。

【讨论】：