Question

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

首先我对导入有什么了解。您可以通过两种不同的方式导入。

1。在文件的顶部，它将导入的模块加载到您可以使用的变量中。

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

2。或者动态地在代码中的任何地方返回一个承诺：

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

但是当使用带反应的导入时，我不明白这种奇怪的行为。如果我有以下组件：

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可以选择扩展功能。

例如，如果我通过传递prop来扩展它来扩展Chart 1的功能，那么Highcharts的功能也在图2中进行了扩展，尽管我没有通过prop来扩展功能。

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>
    )
  }
}

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

Answer 1

当您使用道具<Chart />展开extendFunc时，它将在图表组件中展开，而不会在“新”组件中展开。

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

Answer 2

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

这是导入工作的方式。当您第一次导入某些内容时，将运行该文件，并将其中的导出值返回给导入它的文件。再次导入某些内容时，将重用并返回相同的导出。 Node JS modules work the same way.

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

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

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

导入如何使用react？

2 个答案: