React - 找到在多個父組件中使用公共組件的正確方法

Question

我仍在弄清楚 React 是如何工作並渲染其組件的，並且已經有一段時間了這個問題 - 假設我有一個組件 D 被導入到組件 B 和 C 中，並且 B 和 C 都被導入到組件 A 中。所以組件樹如下所示：

組分 A

• B組份
  • 組分 D
• 組件 C
  • 組分 D

似乎組件 D 通過組件 B 和 C 被兩次導入到組件 A 中（盡管是間接的）。 我想知道這是否會產生性能問題，以及我是否應該嘗試確保從組件 A 的角度來看僅包含一次組件 D（我想使用上下文 API 可以解決這個問題？）

Answer 1

我們在這里討論兩個不同的主題：

1. 多次導入同一個模塊
2. 使用共享或個人 state 多次導入模塊（您提到了上下文 API）

1.多次導入同一個模塊

在多個其他模塊中導入相同的模塊是完全可以的。 想想我們在每個文件中都導入了React 。

這是關於這個主題的一個很好的答案： ES6 import duplicates

此外，下面我添加了一個帶有嵌套結構的示例
（ B和C都導入D ， A導入B和C ）。

這里D從B和C向上傳遞到A ，因此可以在A內部比較兩個導入，並且如您所見，兩個D是相同的，
（控制台 output: D_from_B === D_from_C: true ）：

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

備注：此代碼僅用於說明這一點。 這種方法在普通 App 中通常不能正常工作（例如在回調中設置componentDfromB 。）

2.使用共享或個人state

因此，導入的模塊是相同的。 但state 不是。
導入的“東西”是一個 React。 組件，而不是 React。 Element ，類似於class與instance的關系。

如果 React.Component D被導入，它會在導入它的組件內實例化，因此每個導入組件（ B和C ）都有自己的D實例，以及一個單獨的、自己的 state。 但這通常正是您想要的。

如果您想在不同的組件之間共享相同的 state，您將使用上下文、redux、傳遞道具等技術......我認為細節不在這個問題的 scope 范圍內。

那么性能呢...

我想說性能在這里沒有問題，與模塊導入無關，也與 state 無關。

我認為沒有人真正出於性能原因選擇這里討論的方法，而是出於數據結構或代碼清潔度的考慮（當然，糟糕的數據結構可能性能不佳，但這不是 React 狀態的“錯誤”） .

如果您仍然對性能感到好奇，我認為這應該是一個單獨的、更具體的問題，例如“性能 state 與道具”。