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

不，这是因为你

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

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

1 个答案: