Итак, мы все знаем, что React - отличный фреймворк, он следует архитектуре на основе компонентов, он поощряет подъем состояния, разбивает ваш пользовательский интерфейс на небольшие компоненты и передает данные сверху вниз с помощью свойств.

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

Когда вы передаете данные через реквизиты сверху вниз по дереву компонентов, вы, вероятно, испытали это разочарование, когда вы хотите передать данные из компонента верхнего уровня в компонент уровня 3 или 4, но в конечном итоге вы передаете эти данные компонентам. на каждом уровне дерева.

Это то, что мы называем буровым каналом!

Давайте попробуем взглянуть на пример кода с буровым отверстием.

Пример бурильной колонны

У нас есть тривиальный пример с 3-мя компонентами (TodoPage, TodoList и TodoItem) для демонстрации бурильной колонны.

Как видно из примера, TodoItem требуется onDelete и canDelete из TodoPage, но эти значения должны пройти через TodoList, даже если они не нужны этому компоненту. А если у вас есть линтер, вам, вероятно, придется определить типы пропсов в TodoList для этих реквизитов.

Ладно, хватит! Давайте теперь взглянем на некоторые решения этого безумия.

Решение №1 - Контекстный API

Если вы не знакомы с Context API, я рекомендую вам сначала проверить его здесь. Но если вы уже знакомы с ним, давайте посмотрим, как мы можем реализовать приведенный выше пример, используя его.

Я собираюсь объединить компоненты в одну сущность ради экономии места 😁

Итак, в приведенном выше коде мы смогли избежать передачи onDelete и canDelete в TodoList. Используя Context API, мы можем напрямую передавать данные из TodoPage в TodoItem или в любой листовой компонент в дереве компонентов.

Контекстный API - отличный способ избежать пробуривания, но это не простое решение. Чтобы воспользоваться этим, вам потребуется проделать дополнительную работу. Еще одно предостережение заключается в том, что он тесно связывает ваш компонент с контекстом, а это означает, что будет немного сложно облегчить повторное использование.

Решение №2 - Визуализация реквизита

Это простое решение, которое я предпочитаю. Если вы еще не слышали о Render Props, попробуйте сначала здесь.

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

В приведенном выше коде вместо жесткого кодирования TodoItem внутри TodoList мы предоставляем функцию, называемую rendeItem, чтобы мы могли объявить TodoItem в TodoPage. Таким образом, мы можем напрямую передавать данные из TodoPage в TodoItem.

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

Заключение

Это не значит, что бурение опор - это анти-шаблон, на самом деле, если вы просто хотите обойти один уровень в дереве и передать 2 опоры, как в нашем тривиальном примере сверления опор, вам будет лучше пропустить опоры. через каждый уровень в дереве.

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

👉 Если вам понравилась эта статья и вы считаете ее полезной, пожалуйста, хлопните в ладоши. Кроме того, не забудьте подписаться на меня здесь, на medium, чтобы узнать больше. 👈