Question

看起来antd（https://ant.design）正在产生惊人数量的嵌套以实现其目的。也许我错了，但我觉得必须有更好的方法。

例如，我添加了彩色文本，如下所示：

<Text type="danger">Some words</Text>

在DOM上，它看起来像预期的那样：

<span class="ant-typography ant-typography-danger">Some words</span>

但是在使用react-tools进行检查时，它看起来很肿并且翻了一番：

（“ ...>” =省略的属性）

<Text type="danger">
  <withConfigConsumer(Base)  ...>
    <Context.consumer>
      <Base ...>
        <LocalReceiver  ...>
          <ReactResizeObserver ...>
            <Typography ...>
              <Content.consumer>
                <span ...>
                  "Some words"
...

</Text>
<Context.consumer>
  <Base ...>
    <LocalReceiver  ...>
      <ReactResizeObserver ...>
        <Typography ...>
          <Content.consumer>
            <span ...>
              "Some words"
...

</Context.consumer>

诚然，我对React没有足够的经验。但这不是过度吗？为什么增加一倍？最重要的是：如何使用antd并避免这种情况？

Answer 1

使用antd时不能避免这种情况，因为这是他们的团队决定使用的React设计模式。这些包装器组件是HOC-higher-order components，其目的是在其子组件上应用/重用某些逻辑。

例如，在它们的GitHub repo中，您可以清楚地看到Text，Title和Paragraph是相同的Typography组件，其内部文本是否为styled differently取决于它是否传递了Text，Title或道具这是为了确保可扩展性：如果他们决定创建Quote组件，则只需将Quote条目添加到Typography组件，并定义可能包含斜体文本的Quote样式。然后，包装器的Typography组件会将这种新的斜体样式传递给其子组件-内部文本。

对于ReactResizeObserver来说，许多Ant Design组件都需要在其自身上附加某种 onResize 事件侦听器，以便做出响应-根据屏幕宽度更改其大小或结构。他们没有在需要此功能的每个组件上定义相同的onResize侦听器和处理程序，而是创建了一个HOC，该HOC可以将任何组件包装在幕后并使其具有响应能力。

您真的不应该在意这一点，因为这是许多流行的库（如React Router或Redux）的常见做法。

在将antd与React一起使用时，避免过多嵌套组件的最佳方法是什么？

1 个答案: