导入实例化的 class 设置全局原型

Question

鉴于以下反应组件，我能够从多个组件导入以下组件。我很困惑为什么在导入每个模块并调用 increment 之后，它会像同一个实例一样增加值。我不认为它附加到 'window'，因为我做了一些检查。

会不会，因为这设置了一个全局原型？这仍然不能解释为什么它似乎正在更新相同的实例化 class.

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;

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

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

export default class FeatureFlags extends Component { … }

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

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

导入实例化的 class 设置全局原型

Importing an instantiated class sets global prototype

javascript

ecmascript-6

reactjs

react-redux

es6-class