Добавляет первые разделы рецепта - «Выразительный реакт - рефакторинг»

recipes/expressive-react-refactoring/index.md

@@ -0,0 +1,54 @@
+---
+title: "Выразительный React: рефакторинг везде"
+description: "Улучшаем и упрощаем код."
+authors:
+  - hellsquirrel
+related:
+  - tools/react-and-alternatives
+  - recipes/expressive-react-rectangle
+  - recipes/expressive-react-maze
+tags:
+  - article
+---
+
+> Эта статья — продолжение серии «Выразительный React». В предыдущей статье «[Создаём интерактивные компоненты на React](/recipes/expressive-react-maze») был показан пример интерактивного клиентского приложения. В примерах статьи были намеренно совершены некоторые ошибки. В этой статье мы попробуем исправить одну из них.
+
+## Тяжёлый монолитный компонент
+В предыдущей статье мы создали компонент `Maze` для отображения лабиринта. Сейчас внутри этого компонента содержатся:
+
+* утилиты для генерации случайных чисел и стен лабиринта
+* типы для работы с лабиринтом
+* функция для генерации анимации
+* состояние стен лабиринта
+* собачка
+* логика перемещения собачки
+* компонент кнопки «Апорт»
+
+В своей известной книге, «Рефакторинг», Мартин Фаулер называет подобное «code smell (признак плохого кода)».
+
+Когда в компоненте находится слишком много логики это _может быть_ (а может и не быть) признаком плохой организации кода. В этом случае с организацией действительно не все в порядке, например потому что компонент собачка слишком сильно связан с компонентом лабиринта. Мы не можем отправлять собачку к другим приключениям, а если нам захочется заменить собачку на котика нам зачем-то придется это делать внутри компонента лабиринта.
+
+
+## Проектируем решение
+Хочется разделить компонент на несколько частей, какими могли бы быть эти части и какие у них могли бы быть обязанности?
+
+Воспользуемся популярным трюком с разделением компонентов на простые и сложные. Простые компоненты не содержат никакой логики кроме логики своего отображения. Умные компоненты реализуют какие-то части логики и передают простым компонентам данные для отображения.
+
+Попробуем спроектировать структуру таких компонетов
+
+```tsx
+<Rectangle>
+  <ApportButton onClick={/* Запустить собачку */}>
+  <Maze walls={walls} onWallClick={/* Добавить стену */}>
+    <Animation path={/* какая то логика анимации */}>
+      <Dog chasingBall={/* летит ли собачка */} currentPosition={/* состояние анимации собачки */} />
+    <Animation>
+  <Maze />
+  <Ball />
+</Rectangle>
+```
+
+Чтобы собачка правильно бегала за мячиком, ей нужно знать где расположены стены. Кроме этого собачке необходимо получить сигнал от кнопки «Апорт» о том, что нужно начать движение.
+
+Лабиринту надо откуда-то получить состояние стен и функцию обработки клика по стене.
+Задачу значительно упростит использование стейт-менеджера. На просторах интернета можно найти множество библиотек для управления состоянием, например Redux, MobX, Recoil, Zustand, Jotai. Часто использование стейт-менеджера экономит много времени и сил, но эта статья не для тех кто ищет лёгкие пути.