Question

我有一个简单的组件：

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

为了避免在import中出现膨胀，我想进行简单的命名间隔：

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

并像这样使用它：

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

问题：

这种方法有什么弊端吗？会出问题吗？整体上还好吗？

谢谢

Answer 1

在我学习React的最早阶段时，我经常使用这种方法。

这是我的做法：

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>

但是您的情况看起来有点难看。这就是我使用这种方法的方法：（仅举一个例子）

<Sidebar.ExportOne />
<Sidebar.ExportTwo />
<Sidebar.ExportThree />

当我完全使用这种方法时？

每当需要使用多个组件时，我都会使用这种方法：

// 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'
// ...

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

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

但是很明显，在使用这种方法时有一个很大的缺点 con ，这会影响性能。继续阅读下面的内容以了解原因：

即使您将不使用某些组件，也将导入所有组件。例如：

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

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

因此，您要在PlaceOne.js和PlaceTwo.js中导入所有导出的组件。

要避免这种情况，请使用import语句，例如：

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

结论是，使用<ComponentOne />而非<ComponentAll.ComponentOne />是更好的方法。而且，在使用<ComponentOne />方法时，我们不会失去代码拆分的优势。

Answer 2

我个人认为它通常会增加复杂性，超出它们的价值，但是本文更详细地讨论了在React中使用子组件的潜在优点和缺点。 Article found here。

Answer 3

某些方法的优缺点是主观的，我认为最好同时导出这两个组件，因为我认为这样做没有开销。

考虑是否需要更改组件重用或代码维护以及对大型组件采用这种方法的趋势，

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

使用复合成分的缺点

3 个答案: