Каков наилучший способ избежать чрезмерного количества вложенных компонентов при использовании antd с React?

Question

Похоже, что antd (https://ant.design) генерирует тревожное количество вложений для достижения своей цели. Возможно, я ошибаюсь, но я чувствую, что должен быть лучший способ.

Например, я добавил цветной текст, например, так:

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

В DOM это выглядит как и ожидалось:

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

Но при проверке с помощью реактивных инструментов он выглядит раздутым и удвоенным:

("...>" = пропущенные атрибуты)

<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 - компоненты высшего порядка , и их целью является применение / повторное использование некоторой логики для своих дочерних компонентов.

Например, в их репозитории GitHub вы можете четко видеть, что текст, заголовок и абзац - это просто один и тот же компонент Typography, внутренний текст которого получает по-разному в зависимости от того, передан ли он текст, заголовок или абзац реквизит. Это необходимо для обеспечения расширяемости: если они решат создать компонент Quote, они просто добавят запись Quote в компонент Typography и определят стиль Quote, который, возможно, будет включать курсив. Затем компонент «Типография» обертки передает этот новый выделенный курсивом стиль своему дочернему компоненту - внутреннему тексту.

Что касается ReactResizeObserver, то для многих компонентов Ant Design требуется, чтобы какой-либо прослушиватель событий onResize был присоединен к себе, чтобы быть отзывчивым - чтобы изменить свой размер или структуру в зависимости от ширины экрана. Вместо того, чтобы определять один и тот же слушатель и обработчик onResize для каждого компонента, которому требуется эта функциональность, они создали единый HOC, который может обернуть любой компонент под капотом и позволить ему реагировать.

Вы действительно не должны заботиться об этом, так как это обычная практика для многих популярных библиотек, таких как React Router или Redux.