Javascript 反应-找到在多个父组件中使用公共组件的正确方法

我仍然在弄清楚React是如何工作和呈现其组件的，并且有一段时间有这个问题-假设我有一个组件D被导入到组件B&C中，并且两个B&C都被导入到组件a中。因此组件树将如下所示：

A部分

• B部分
  • 成分D
• 成分C
  • 成分D

---

组件D似乎通过组件B和C两次导入组件A（尽管是间接的）。我想知道这是否会造成性能问题，我是否应该尝试确保组件A只包含一次组件D（我想使用上下文API可以解决这个问题？）我们在这里讨论两个不同的主题：

多次导入同一模块

对多次导入的模块使用共享或单个状态（您提到了上下文API）

1.多次导入同一模块 在多个其他模块中导入相同的模块完全可以。想想我们在每个文件中导入

React

关于这个话题，这里有一个很好的答案：

此外，下面我添加了一个嵌套结构的示例
（

B

和

C

都导入

D

，

A

导入

B

和

C

）

这里

D

从

B

和

C

向上传递到

A

，这样两个导入都可以在

A

内部进行比较，正如您所看到的，这两个

D

都是相同的，
（控制台输出：

D_from_B==D_from_C:true

）：

/--ComponentD.jsx--
从“React”导入React；
导出默认功能组件（道具）{
返回（导入的模块组件）；
};
//==组件c.jsx==
从“React”导入React，{useffect}；
从“/ComponentD”导入组件；
导出默认功能组件C（道具）{
useffect（（）=>{props.passSub（component）；}，[]）；
返回(
成分C

);
};
//==组件B.jsx==
从“React”导入React，{useffect}；
从“/ComponentD”导入组件；
导出常量组件B=（道具）=>{
useffect（（）=>{props.passSub（component）；}）；
返回(
成分B

);
};
//==组件a.jsx==
从“React”导入React，{useffect}；
从“/ComponentB”导入{ComponentB}；
从“./ComponentC”导入ComponentC；
让ComponentFromb=null；
让componentDfromC=null；
导出常量组件A=（道具）=>{
useffect（（）=>{
log（'D from B==D from C:'，ComponentFromb===ComponentFromc）；//您可以将is导入组件A，并将其作为道具传递给组件B和C。是的，这可能是问题所在，这就是您可以使用redux解决此问题的原因。您可以检查以下答案。我认为，按照webpack的工作方式，这不会是问题。您可以检查生成文件以查看是否获得两份componen我以为webpack会将组件D保存为变量，然后在需要时访问该变量。但我可能错了。
// -- ComponentD.jsx --

import React from 'react';
export default function ComponentD(props){
    return (<span>imported module ComponentD</span>);
};

// == ComponentC.jsx ==

import React, { useEffect } from 'react';
import ComponentD from './ComponentD';

export default function ComponentC( props ){
    useEffect(()=>{ props.passSub( ComponentD ); },[]);
    return (<div>
        <p>ComponentC</p>
        <ComponentD />
    </div>);
};

// == ComponentB.jsx ==

import React, { useEffect } from 'react';
import ComponentD from './ComponentD';

export const ComponentB = (props)=>{
    useEffect(()=>{ props.passSub( ComponentD ); });
    return (<div>
        <p>ComponentB</p>
        <ComponentD />
    </div>);
};

// == ComponentA.jsx ==

import React, { useEffect } from 'react';
import { ComponentB } from './ComponentB';
import ComponentC from './ComponentC';

let componentDfromB = null;
let componentDfromC = null;

export const ComponentA = (props)=>{

    useEffect(()=>{
        console.log('D from B === D from C:', componentDfromB === componentDfromC);      // <--- true
        console.log('Object.is(DB, DC):', Object.is(componentDfromB, componentDfromC));  // <--- true
    });

    return (<div>
        <ComponentB passSub={ function( Sub ){ componentDfromB = Sub; } } />
        <ComponentC passSub={ function( Sub ){ componentDfromC = Sub; } } />
    </div>);
};