Javascript 使用复合成分的缺点

我有一个简单的组件：

const Sidebar = (props) => { ... }
const SidebarLink = (props) => { ... }

// ComponentOne.js
export const ComponentOne = () => {}


// ComponentTwo.js
export const ComponentTwo = () => {}


// ComponentThree.js
export const ComponentThree = () => {}

// ...

// ComponentIndex.js
export { ComponentOne } from 'ComponentOne'
export { ComponentTwo } from 'ComponentTwo'
// ...

为了避免导入中出现膨胀，我想使用简单的名称空间：

Sidebar.propTypes = propTypes
Sidebar.Link = SidebarLink
export default Sidebar

然后像这样使用它：

<Sidebar>
  <Sidebar.Link>...</Sidebar.Link>
  <Sidebar.Link>...</Sidebar.Link>
  <Sidebar.Link>...</Sidebar.Link>
</Sidebar>

...
...
...

问题：

这种方法有什么缺点吗？ 有些事情会出错吗？ 整体上还好吗

---

谢谢

我在学习的最初阶段就经常使用这种方法

我是这样做的：

export const Sidebar = (props) => { ... }
export const SidebarLink = (props) => { ... }

当我们需要使用它们时：

import * as Sidebar from '...' // path to the exports
<Sidebar.Sidebar>
  <Sidebar.SidebarLink>...</Sidebar.Link>
  <Sidebar.SidebarLink>...</Sidebar.Link>
  <Sidebar.SidebarLink>...</Sidebar.Link>
</Sidebar.Sidebar>

现在在单独的组件中使用它。因此，最好是全部导入，而不是使用大量行的import语句：

import * as ComponentAll from 'ComponentIndex'
<ComponentAll.ComponentOne />
<ComponentAll.ComponentTwo />
...

---

这表明使用

而不是

是更好的方法。而且，在使用

方法时，我们不会失去代码拆分的优势。
某些方法的优缺点是主观的，在我看来，最好同时导出这两个组件，因为我认为这样做不会产生开销。考虑到组件重用，或代码维护，如果某些内容发生变化，以及对较大组件采用这种方法的趋势

即使对于简单的组件，我也不推荐这种方法

就我个人而言，我发现它通常会增加更多的复杂性，但本文将更详细地讨论som在React中使用子组件的潜在优势和缺点
 再加上导入可能不使用的代码，代码拆分的优势就消失了。谢谢您的时间，但您所说的“这将影响性能”是什么意思？捆绑机性能？在我的情况下，这并不重要，因为使用
侧边栏.Link
而不使用
侧边栏
@streletss性能是没有意义的，我的意思是导入所有内容，但使用一些。在您的情况下，不会有任何影响，因为您使用的是所有导入的组件。
import * as ComponentAll from 'ComponentIndex'
<ComponentAll.ComponentOne />
<ComponentAll.ComponentTwo />
...

// PlaceOne.js
<ComponentAll.ComponentOne />
<ComponentAll.ComponentThree />

// PlaceTwo.js
<ComponentAll.ComponentTwo />
<ComponentAll.ComponentFive />

import {
  ComponentOne,
  ComponentTwo,
  // ... import only required component
} from 'ComponentIndex'
// Now, you can simply use:
<ComponentOne />
<ComponentTwo />