Другая стратегия управления состоянием.

React Prop Drilling — это детализация данных от родительского компонента к дочернему компоненту. Это передача данных, которые должны быть доступны на всех уровнях.

Данные передаются дочернему компоненту, который либо отображает, либо извлекает данные с использованием разных протоколов. Мы много кэшируем, чтобы избежать повторного рендеринга реагирующего компонента, но если наше приложение сложное и глубоко вложенное. Повторный рендеринг будет происходить всякий раз, когда реквизиты обновляются.

Давайте разберемся с винтовым бурением, но попробуем

Например, если у вас есть такая иерархия компонентов:

ParentComponent
  ├── IntermediateComponent1
  │     └── IntermediateComponent2
  │           └── TargetComponent

Если у ParentComponent есть какие-то данные, необходимые TargetComponent, детализация опоры включает передачу этих данных из ParentComponent через IntermediateComponent1 и IntermediateComponent2, прежде чем они наконец достигнут TargetComponent. Каждый промежуточный компонент получает данные в качестве реквизита и передает их на следующий уровень.

function App() {

  const [user, setUser] = useState({ name: "John Doe" });

return (

    


      

    


  );

}

function ParentComponent({ user }) {

  return (

    


      

    


  );

}

function Child({ user }) {

  return (

    


      

    


  );

}

function Grandchild({ user }) {

  return 
Hello, {user.name}!
;

}

Пропеллерное бурение: хорошо или плохо?

Ответ на этот вопрос не простой «да/нет», он полностью зависит от вашего варианта использования. Существуют различные факторы, такие как контекст и масштаб вашего приложения.

• Малый проект: для небольших проектов, которые в основном представляют собой базовые веб-сайты, такие как портфолио и базовая страница продукта, можно использовать пропеллерное сверление. Для таких приложений нет смысла настраивать весь инструмент управления состоянием, такой как mobx или Redux.

• Государственное управление внесло в проект ненужную сложность, но этого можно легко избежать с помощью винтового бурения.

Использование пропеллерного бурения в React.

1. *Обмен данными
   * Детализация свойств обычно используется, когда глубоко вложенному дочернему компоненту требуется доступ к данным или функциям родительского компонента. Например, если родительский компонент содержит состояние приложения или функцию, которая обновляет состояние, а дочернему компоненту необходимо получить доступ к этому состоянию или изменить его, детализация свойств — это способ сделать эти данные или функцию доступными.

2. *Явный поток данных
   * Одним из ключевых преимуществ винтового бурения является то, что оно поддерживает четкий и явный поток данных внутри приложения. Передавая реквизиты через каждый компонент, всегда становится очевидным, откуда поступают данные и как они передаются, что может упростить отладку и понимание кода.

3. *Простота в небольших приложениях
   * В небольших приложениях или когда иерархия компонентов относительно неглубока, сверление винта является простым решением, не требующим дополнительных инструментов или библиотек. Это позволяет разработчикам управлять состоянием и передавать данные без каких-либо сложностей.

Альтернатива бурению в React.

1. API контекста реагирования

• Что это такое: Встроенная функция React, которая позволяет вам обмениваться данными по дереву компонентов без необходимости передавать реквизиты вручную на каждом уровне.

• Когда использовать: Подходит для обмена глобальными данными, такими как темы, статус аутентификации пользователя или региональные настройки.

• Вы можете использовать Context API, чтобы избежать передачи реквизитов на каждом уровне дерева компонентов. Контекст позволяет вам создать глобальное состояние, к которому может получить доступ любой компонент, минуя необходимость передавать реквизиты вручную через каждый уровень.

Плюсы:

• Уменьшает необходимость бурения винта.

• Упрощает обмен данными между несколькими компонентами.

Минусы:

• Может вводить скрытые зависимости, что делает компоненты менее пригодными для повторного использования.

• Чрезмерное использование может усложнить отладку.

2. Библиотеки управления состоянием (например, Redux, MobX)

• Что это такое: Внешние библиотеки, которые обеспечивают структурированный способ управления и совместного использования состояния приложения.

• Когда использовать: Идеально подходит для крупномасштабных приложений, где управление состоянием сложное и требует предсказуемой структуры.

Плюсы:

• Централизует управление состоянием.

• Облегчает отладку и тестирование.

• Поддерживает отладку путешествий во времени и другие расширенные функции.

Минусы:

• Добавляет дополнительную сложность и требует дополнительного обучения.

• Может быть излишним для простых приложений.

3. Пользовательские крючки

• Что это такое: Многоразовые функции в React, которые инкапсулируют логику с отслеживанием состояния, что позволяет легко обмениваться логикой между компонентами.

• Когда использовать: Полезно для обмена логикой и поведением с отслеживанием состояния без детализации реквизита.

Плюсы:

• Способствует повторному использованию кода и чистоте.

• Компоненты остаются краткими и целенаправленными.

Минусы:

• Может подходить не для всех сценариев обмена данными.

• Требуется понимание API React Hooks.

4. Состав и компоненты высшего порядка.

• Что это такое: Шаблоны, которые позволяют улучшать компоненты, добавляя в них дополнительную функциональность.

• Когда использовать: Полезно для внедрения свойств и поведения в компоненты без изменения их структуры.

Плюсы:

• Поощряет повторное использование и компоновку кода.

• Может исключить некоторые случаи бурения винта.

Минусы:

• Можно усложнить дерево компонентов.

• Может быть сложнее отслеживать поток данных по сравнению с явной передачей свойств.

Недостатки пропсов сверления в React

1. Читаемость кода: Детализация реквизита может затруднить понимание компонентов, поскольку вам придется отслеживать реквизит через несколько слоев дерева компонентов.

2. Обслуживание: По мере роста вашего приложения управление таким кодом и его рефакторинг становятся затруднительными. Изменение структуры реквизита может оказаться затруднительным, если задействовано много компонентов.

3. Производительность: Ненужные повторные рендеринги могут произойти, если реквизиты изменяются на более высоком уровне и передаются на несколько слоев, даже если данные нужны только глубоко вложенному компоненту.

4. Проблемы масштабируемости: По мере роста приложений и углубления деревьев компонентов бурение винтов может стать обременительным и трудным в управлении. Это может привести к созданию многословного кода и усложнить обслуживание.

5. Избыточные реквизиты: Промежуточные компоненты вынуждены получать и передавать реквизиты, которые они не используют, что приводит к ненужной связи и потенциальной путанице.

6. Сложность обслуживания: Обновление или рефакторинг компонентов может привести к ошибкам, поскольку изменения в структуре данных могут потребовать обновлений на нескольких уровнях компонентов.

Заключительные мысли

Надеюсь, вы поняли, что такое «сверление опор» в React — метод передачи данных через несколько слоев компонентов. Хотя винтовое бурение хорошо подходит для небольших приложений с простой структурой компонентов, по мере роста приложений оно может стать громоздким и сложным в управлении.

Проблемы включают снижение читаемости кода, трудности с обслуживанием и проблемы с производительностью из-за ненужных повторных рендерингов. Чтобы преодолеть эти ограничения, предлагаются альтернативы, такие как React Context API, библиотеки управления состоянием (например, Redux, MobX) и специальные перехватчики, хотя они имеют свои собственные сложности.

По сути, хотя винтовое бурение полезно в определенных сценариях, важно рассматривать более масштабируемые решения по мере роста вашего проекта.

Об авторе

Апурв — опытный разработчик программного обеспечения. Вы можете подключиться в **социальных сетях.
Подпишитесь на информационный бюллетень Apoorv, чтобы получать новейший контент.