javascript - 导入实例化类设置全局原型(prototype)

Question

鉴于以下 react 组件，我可以从多个组件导入以下组件。我很困惑为什么在导入每个模块并调用增量后，它会增加值，就好像它是同一个实例一样。我不认为它附着在“窗口”上，因为我做了一些检查。

这可能是因为这设置了全局原型(prototype)吗？这仍然无法解释为什么它似乎更新相同的实例化类。

import React, { Component } from 'react';

class FeatureFlags extends Component {
  constructor (props) {
    super (props);
    this.featureFlagList = [ 'test': true ];
    this.i = 0;
  }

  get showFeatureFlagList () {
    return this.featureFlagList;
  }

  increment () {
    this.i++;
    return this.i;
  }

  setList (list) {
    this.featureFlagList = list;
    return this.featureFlagList;
  }

  render () {
    return (
      <div></div>
    );
  }
}

export default new FeatureFlags;

//First component - 
import FeatureFlags from './FeatureFlags';
console.log('first module ',  FeatureFlags.increment() );  //Logs 1

//Second component
import FeatureFlags from './FeatureFlags';
console.log('second module ',  FeatureFlags.increment() );  //Logs 2

Answer 1

不，是因为你

export default new FeatureFlags;

这是一个实例!多次导入模块将始终导入相同的值。

相反，您应该始终导出该类:

export default class FeatureFlags extends Component { … }

并根据需要在其他模块中实例化它:

import FeatureFlags from './FeatureFlags';
const myLocalFlags = new FeatureFlags;
console.log('first module ', myLocalFlags.increment());  //Logs 1