Переход от базового к продвинутому React

Некоторое время назад я начал задаваться вопросом, как улучшить свою игру React.

Будучи новичком в React, я научился брать страницу, разбивать ее на составные части, организовывать файловую структуру, реализовывать React Router, даже реализовывать Redux, но все же мой код React на 100 % состоял из наследования и передачи классов компонентов. реквизит. Это все. Объявите класс, установите состояние (или нет), передайте реквизиты, повторите.

Я знал, что существуют «Расширенные шаблоны React», и хотел дойти до того, что мне будет удобно внедрять эти шаблоны в производство. Но, как и в случае с изучением большинства вещей в коде, учебные пособия не дают вам достаточного, а затем возникает разрыв между ресурсами уровня новичка и эксперта.

Так что — медленно — я просмотрел видео на You Tube, многие из которых были очень полезными от таких людей, как Кент Доддс и Стив Кинни, и куча других, чьи имена я не помню. Они очень помогли, но я не нашел ничего особенно ориентированного на то, чтобы взять начинающего реагировать и повысить уровень их игры.

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

Возможно, я расскажу подробности в следующих постах, но вот список обнаруженных мной техник, которые я бы поместил в корзину с навыками реагирования на уровне где-то выше уровня новичка. Я был бы extatic, если у кого-то из вас есть другие, чтобы порекомендовать!

Продвинутые методы React, упорядоченные от «самого простого» к самому сложному:

1. Функциональные компоненты

Функциональные компоненты — это просто компоненты, объявленные как функции, а не классы. Однако они ведут себя немного по-другому, одно отличие состоит в том, что они не могут иметь состояние. Это может быть очень полезно, если вы не хотите, чтобы этот компонент сохранял состояние, и хотите убедиться, что никто другой (включая вас) не захочет добавить его позже.

2. Типы реквизита

Проверка типов для реактивных реквизитов

3. React Composition / React Composite Components / Compound Components

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

4. Реагируйте на детей

Тесно связан с составными компонентами, но заслуживает внимания сам по себе

5. Компоненты высшего порядка

5. Ссылки на компоненты React

Ссылки — это способ хранения ссылок на объект в экземпляре компонента.

6. Реагировать на контекст

… и многое другое

Использованная литература:

• Я очень полагаюсь на многие работы Кента Доддса.
  пример поста:
• Документация по реакции, хотя иногда ее сложно понять, если вы плохо разбираетесь в окружающих концепциях, потрясающая.