Добавляет первые разделы рецепта - «Выразительный реакт - рефакторинг» #5295
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
статья
Превью контента из опубликовано. |
solarrust
reviewed
May 14, 2024
| @@ -0,0 +1,54 @@ | |||
| --- | |||
| title: "Выразительный React: рефакторинг везде" | |||
There was a problem hiding this comment.
Suggested change
| title: "Выразительный React: рефакторинг везде" | |
| title: "Выразительный React: рефакторинг" |
Предлагаю чуть убавить игривости в заголовке =)
Comment on lines
+16
to
+26
| ## Тяжёлый монолитный компонент | ||
| В предыдущей статье мы создали компонент `Maze` для отображения лабиринта. Сейчас внутри этого компонента содержатся: | ||
|
|
||
| * утилиты для генерации случайных чисел и стен лабиринта | ||
| * типы для работы с лабиринтом | ||
| * функция для генерации анимации | ||
| * состояние стен лабиринта | ||
| * собачка | ||
| * логика перемещения собачки | ||
| * компонент кнопки «Апорт» | ||
|
|
There was a problem hiding this comment.
Suggested change
| ## Тяжёлый монолитный компонент | |
| В предыдущей статье мы создали компонент `Maze` для отображения лабиринта. Сейчас внутри этого компонента содержатся: | |
| * утилиты для генерации случайных чисел и стен лабиринта | |
| * типы для работы с лабиринтом | |
| * функция для генерации анимации | |
| * состояние стен лабиринта | |
| * собачка | |
| * логика перемещения собачки | |
| * компонент кнопки «Апорт» | |
| ## Тяжёлый монолитный компонент | |
| В предыдущей статье мы создали компонент `Maze` для отображения лабиринта. Сейчас внутри этого компонента содержатся: | |
| - утилиты для генерации случайных чисел и стен лабиринта; | |
| - типы для работы с лабиринтом; | |
| - функция для генерации анимации; | |
| - состояние стен лабиринта; | |
| - собачка; | |
| - логика перемещения собачки; | |
| - компонент кнопки «Апорт». | |
| * логика перемещения собачки | ||
| * компонент кнопки «Апорт» | ||
|
|
||
| В своей известной книге, «Рефакторинг», Мартин Фаулер называет подобное «code smell (признак плохого кода)». |
There was a problem hiding this comment.
Suggested change
| В своей известной книге, «Рефакторинг», Мартин Фаулер называет подобное «code smell (признак плохого кода)». | |
| В своей известной книге «Рефакторинг» Мартин Фаулер называет подобное «code smell» (признак плохого кода). |
|
|
||
| В своей известной книге, «Рефакторинг», Мартин Фаулер называет подобное «code smell (признак плохого кода)». | ||
|
|
||
| Когда в компоненте находится слишком много логики это _может быть_ (а может и не быть) признаком плохой организации кода. В этом случае с организацией действительно не все в порядке, например потому что компонент собачка слишком сильно связан с компонентом лабиринта. Мы не можем отправлять собачку к другим приключениям, а если нам захочется заменить собачку на котика нам зачем-то придется это делать внутри компонента лабиринта. |
There was a problem hiding this comment.
Suggested change
| Когда в компоненте находится слишком много логики это _может быть_ (а может и не быть) признаком плохой организации кода. В этом случае с организацией действительно не все в порядке, например потому что компонент собачка слишком сильно связан с компонентом лабиринта. Мы не можем отправлять собачку к другим приключениям, а если нам захочется заменить собачку на котика нам зачем-то придется это делать внутри компонента лабиринта. | |
| Когда в компоненте находится слишком много логики это _может быть_ (а может и не быть) признаком плохой организации кода. В этом случае с организацией действительно не всё в порядке. Например, потому что компонент собачка слишком сильно связан с компонентом лабиринта. Мы не можем отправлять собачку к другим приключениям, а если нам захочется заменить собачку на котика нам зачем-то придется это делать внутри компонента лабиринта. |
| Когда в компоненте находится слишком много логики это _может быть_ (а может и не быть) признаком плохой организации кода. В этом случае с организацией действительно не все в порядке, например потому что компонент собачка слишком сильно связан с компонентом лабиринта. Мы не можем отправлять собачку к другим приключениям, а если нам захочется заменить собачку на котика нам зачем-то придется это делать внутри компонента лабиринта. | ||
|
|
||
|
|
||
| ## Проектируем решение |
There was a problem hiding this comment.
Suggested change
| ## Проектируем решение | |
| ## Проектируем решение | |
|
|
||
|
|
||
| ## Проектируем решение | ||
| Хочется разделить компонент на несколько частей, какими могли бы быть эти части и какие у них могли бы быть обязанности? |
There was a problem hiding this comment.
Suggested change
| Хочется разделить компонент на несколько частей, какими могли бы быть эти части и какие у них могли бы быть обязанности? | |
| Хочется разделить компонент на несколько частей. Какими могли бы быть эти части и какие у них могли бы быть обязанности? |
| ## Проектируем решение | ||
| Хочется разделить компонент на несколько частей, какими могли бы быть эти части и какие у них могли бы быть обязанности? | ||
|
|
||
| Воспользуемся популярным трюком с разделением компонентов на простые и сложные. Простые компоненты не содержат никакой логики кроме логики своего отображения. Умные компоненты реализуют какие-то части логики и передают простым компонентам данные для отображения. |
There was a problem hiding this comment.
Suggested change
| Воспользуемся популярным трюком с разделением компонентов на простые и сложные. Простые компоненты не содержат никакой логики кроме логики своего отображения. Умные компоненты реализуют какие-то части логики и передают простым компонентам данные для отображения. | |
| Воспользуемся популярным трюком с разделением компонентов на простые и сложные. _Простые компоненты_ не содержат никакой логики кроме логики своего отображения. _Сложные компоненты_ реализуют какие-то части логики и передают простым компонентам данные для отображения. |
|
Пинг =) |
|
А для этого раздела уже полностью прописан план? Ну то есть от статьи к статье будет идти какая-то связь или не обязательно? Мне просто кажется тема про паттерны в реакт сюда хорошо подошла бы. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Это ранний драфт, который будет ооочень долго ползти в направлении продакшена :)
Любые предложения приветствуются