From 0de36a2c958c80247e72965218822df72dfd0d48 Mon Sep 17 00:00:00 2001 From: Polina Gurtovaya Date: Wed, 17 Apr 2024 22:50:59 +0100 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=BF=D0=B5=D1=80=D0=B2=D1=8B=D0=B5=20=D1=80?= =?UTF-8?q?=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- recipes/expressive-react-refactoring/index.md | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 recipes/expressive-react-refactoring/index.md diff --git a/recipes/expressive-react-refactoring/index.md b/recipes/expressive-react-refactoring/index.md new file mode 100644 index 0000000000..8d8a9749f3 --- /dev/null +++ b/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 + + + + + + + + + +``` + +Чтобы собачка правильно бегала за мячиком, ей нужно знать где расположены стены. Кроме этого собачке необходимо получить сигнал от кнопки «Апорт» о том, что нужно начать движение. + +Лабиринту надо откуда-то получить состояние стен и функцию обработки клика по стене. +Задачу значительно упростит использование стейт-менеджера. На просторах интернета можно найти множество библиотек для управления состоянием, например Redux, MobX, Recoil, Zustand, Jotai. Часто использование стейт-менеджера экономит много времени и сил, но эта статья не для тех кто ищет лёгкие пути. \ No newline at end of file