javascript - react中导入js对象时的内存

Question

我不熟悉 React 及其生成 javascript 的转译方式。

在 react 方面，我有一个类 Utility 使用数据对象 UserData 组织如下 -

用户数据对象

class UserData{
  this.someobj = {};
  //some function here
  something(){

  }
}

const UserDataObj = new UserData();
export {UserDataObj};

实用程序.js

import {UserDataObj} from './data/UserDataObj';
class Utility {
    doSomething(){
      //UserDataObj.something();
    }
}
const utility = new Utility();
export {utility};

我有另一个 ReactApp UserApp.js，它也使用 UserDataObj 和 Utility(尽管设计不明智)-

import {UserDataObj} from './data/UserDataObj';
import {utility} from './Utility';
class UserApp extends React.Component{
    //does something with UserDataObj
    // also does somethign with utility
}

我的问题是，在呈现 UserApp 时，将在内存中创建多少个 utility 和 UserDataObj 实例。我的猜测是，两者都应该只有 1 个实例。但我想确认导入 n 次是否每次都创建一个新实例。

非常感谢任何关于此主题的好文章。

谢谢

Answer 1

这取决于捆绑工具，而不是 React。我想象新的浏览器 ES 模块解析方案以相同的方式工作。

我所知道的大多数 bundler 和其他导入方案(例如 Node.js 的 require 模块解析)将缓存文件之间的导入并始终返回相同的导出对象。例如，这是原型(prototype)继承的要求，否则，它会弄乱 instanceof 运算符。

导出的 new Utility() 实例对于导入它的任何模块都是相同的。为了生成新实例，您必须有一个函数。