时间戳

首页 > 解决方案 > 在 React 中多次导入模块。代码是执行一次还是执行多次

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

问题描述

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

我有这个功能

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/ 仍然无法完全解释发生了什么

标签： javascriptreactjsimportmodule

解决方案

在第一个场景中，有两个单独的调用myFunction，
也就是说两个单独的调用Math.random()（考虑到它的实现）。

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

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

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

推荐阅读