在 React 中多次導入模塊。 代碼是執行一次還是執行多次

Question

一切都始於需要在 function 調用中進行配置，並弄清楚如果在多個文件中導入會發生什么。

我有這個 function

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

兩種情況。 直接導入function，多處展示。 顯示不同的值。 第一個案例

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/仍然無法完全解釋發生了什么

Answer 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

這就是顯示相同值的原因。