Детализация Prop — это то, как ReactJS упрощает одностороннюю привязку данных. Хотя очень легко следовать при разработке компонентов сверху вниз; очень сложно отлаживать компонент React, который получает свойство, которым управляет другой компонент на много уровней выше. Вы можете использовать React DevTools, чтобы визуально следить за иерархией реквизита, но отладка все равно обременительна.
Существует множество подходов к уменьшению сверления винта, если оно становится слишком глубоким. Некоторые из которых
Использование API React Context
Использование паттерна Render Props (или HOC)
Использование шаблона композиции
В этом посте я рассмотрю подход «Использование шаблона композиции».
Начнем с примера вложенных компонентов React.
Здесь RootComponent управляет переменной состояния, и она используется в TargetLeafComponent. Для иллюстрации все эти компоненты перечислены в одном файле, но он может быть разбросан по многим исходным файлам JS. Проблемы с этим подходом в проекте из нескольких 1000 строк кода:
- Объявление переменных состояния и их использование находятся в отдельных компонентах, которые могут находиться в разных файлах. Обнаружение этого потока при анализе исходного кода чрезвычайно сложно и может потребовать, чтобы приложение каждый раз запускалось и отслеживалось детализация реквизитов с помощью React DevTools.
- Свойства промежуточных компонентов — FirstLevelInnerComponent и SecondLevelInnerComponent — загрязняются, чтобы их можно было передать по наследству. Эти промежуточные компоненты действуют как прокси. Для краткости здесь показаны только 2 реквизита, но в реальном приложении их может быть много, что усугубляет проблему. Кто-то может возразить, что prop-spreading — это решение, но я считаю, что это еще большая проблема, потому что это всего лишь синтаксический сахар, но семантика остается неизменной для тех, кто читает код.
Преобразование его в шаблон композиции…
Очевидно, что здесь удалось избежать двух негативных аспектов бурения с опорой.
- В RootComponent определены переменные состояния, а также в том же компоненте мы видим, что TargetLeafComponent связан с пропсами. Таким образом, мы видим, что определение и использование рядом (в одном файле) повышают читабельность.
- Промежуточные компоненты — FirstLevelInnerComponent и SecondLevelInnerComponent — не обременены передачей свойств вниз. Устранение ненужных свойств (если вы думаете о компоненте React как о функции, устранение ненужных аргументов) — это выигрыш в читабельности!
Итак, каковы именно шаги рецепта для достижения этого шаблона?
Шаг 1. Определите промежуточные компоненты, в которых объекты просто проксируются.
Шаг 2. Рефакторинг, удаление реквизита, предназначенного только для прокси, и вместо этого просто визуализация дочернего реквизита.
Шаг 3. Скомпонуйте их, вставив компоненты React там, где это необходимо. Это будет корневой компонент, в котором существует некоторая логика управления состоянием.
Весь код, использованный в этом посте, можно найти в этом репозитории GitHub.
