インスタンス化されたクラスをインポートすると、グローバルプロトタイプが設定されます

Question

以下の反応コンポーネントがあると、複数のコンポーネントから次のコンポーネントをインポートできます。なぜ私は各モジュールにインポートして、インクリメントを呼び出すと、同じインスタンスであるかのように値をインクリメントします。私はいくつかの点検をしたので、それが「窓」に付いているとは思わない。

グローバルプロトタイプが設定されている可能性がありますか？それでも、なぜインスタンス化された同じクラスを一見して更新しているのか説明できません。

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

いいえ、それは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