Javascript 导入如何与react一起工作？

我更广泛的问题是模块的导入是否在两个组件之间共享？为什么

首先，我对进口了解多少。您可以用两种不同的方式导入

一,。 在文件顶部，将导入的模块加载到一个变量中，然后可以使用该变量

import Highcharts from './highcharts'
// create a chart
Highcharts.Chart()

二,。 或者在代码中的任何位置动态返回承诺：

import('./highcharts').then((response) => {
  // create chart
  response.Chart();
});

但是在使用import和react时，有一种奇怪的行为我不理解。如果我有以下组件：

import React, {Component} from 'react';
import Highcharts from 'highcharts/js/highcharts';

export default class Chart extends Component {
  state = {
    chartOptions: {
      // my chart options and data
    }
  }

  componentDidMount() {
    if(this.props.extendFunc) {
      import('highcharts/js/modules/funnel.src.js').then((funnelModule) => {
        funnelModule(Highcharts)
      })
    }
    Highchart.Chart('myChart', this.state.chartOptions)
  }

  render() {
    <div id="myChart" />
  }
}

我使用上面的组件两次。现在存在两个组件使用相同导入的行为，例如Highcharts的导入不会发生两次。我注意到了这一点，因为Highcharts提供了扩展功能的选项

import React, {Component} from 'react';
import Chart from './Chart';

export default class Dashboard extends Component {
  render() {
    return (
      <div>
        <Chart extendFunc={true}> Chart 1 </Chart>
        <Chart> Chart 2 </Chart>
      </div>
    )
  }
}

例如，如果我通过传递一个道具来扩展图表1的功能，那么Highcharts的功能也会在图表2中扩展，尽管我没有传递道具来扩展功能

import React, {Component} from 'react';
import Chart from './Chart';

export default class Dashboard extends Component {
  render() {
    return (
      <div>
        <Chart extendFunc={true}> Chart 1 </Chart>
        <Chart> Chart 2 </Chart>
      </div>
    )
  }
}

是什么导致了这种行为？这是react还是导入的工作方式？同一组件的多个实例的导入是全局的吗？或者，对于整个应用程序，节点模块的导入是否相同？

使用prop extendFunc扩展时，它将在图表组件中扩展，而不是在新组件中扩展

这意味着，如果您调用该组件，它将始终具有您提供给它的道具，但如果没有按要求设置道具，则不必使用它们

是什么导致了这种行为？这是react还是导入的工作方式？同一组件的多个实例的导入是全局的吗？或者，对于整个应用程序，节点模块的导入是否相同

这就是导入的工作方式。当您第一次导入某些内容时，将运行该文件，并将从中导出的值返回到导入该文件的文件。当再次导入某些内容时，这些导出将被重用并返回

有时，这种行为是有帮助的，首先是为了提高性能，避免不必要地重新运行同一个文件，如果模块想要存储一些内部状态，也可以这样做。例如，计算从应用程序中任何位置调用函数的次数

在这种情况下，您需要为每个脚本创建一个实例，模块通常会为您提供一种实际创建该实例的方法。例如，我可能有一个日志模块，它导出一个Logger类，然后我可以为每个组件创建该类的新实例，并分别配置每个Logger

---

对于您的情况，请查看文档，看看是否有办法制作Highcharts的每个组件实例，并使用您需要的功能扩展单个实例。

我不确定我们是否在谈论同样的事情。我想我提供了一个糟糕的例子，我使用了extendFunc，但没有在我的组件中使用它。我更新了我的示例。我的问题更多的是关于为什么我的两个组件都有一个扩展的功能，尽管我只是在一个组件中添加它；