Автор оригинала: FreeCodeCamp Community Member.
Ryan Yurkanin.
TL; DR: Крючки извлекли из компромиссов микс, компонентов более высокого порядка и рендеринга, чтобы принести нам новые способы создать содержащийся, композитное поведение что можно потреблять в А плоский и декларативный способ. ?
Тем не менее, крючки поставляются со своей ценой. Они не серебряный раствор пули. Иногда вам нужна иерархия. Так что давайте посмотрим поближе.
Реактивные крючки здесь, и я сразу влюбился в них. Чтобы понять, почему крючки велики, я думаю, что это помогает посмотреть на то, как мы решаем общую проблему по всей истории реагирования.
Вот ситуация. Вы должны показать позицию мыши пользователя. ?
⚠️ Однако есть некоторые способы, которые могут вернуться, чтобы укусить нас.
- Если вам нужно, что мыши перемещают поведение в другом компонент, вам придется переписать тот же код.
- Если вы добавите больше поведения, как это, станет сложнее понять на первый взгляд. Это потому, что логика поведения распространяется по
ComponentDidmountиComponentWillunmount?
Мы работаем, хотя, и у нас есть тонна инструментов, чтобы помочь нам разбить этот узор. Давайте рассмотрим некоторые из способов, которые мы исторически сделали это, и их компромиссы. ?
Смешивание
Мистины получают много флак. Они устанавливают сцену для объединения жизненного циклов, чтобы описать один эффект.
Хотя общее представление о капсулировании логики велика, мы получили обучение некоторыми серьезные уроки из микс Отказ
Это не очевидно, где this.state.x исходит от. С Mixins, также возможно, чтобы смешин слепо опираться на то, что имущество существует в компоненте.
Это становится огромной проблемой, когда люди начинают в том числе и расширять тонны микс. Вы не можете просто искать в одном файле и предположить, что вы не сломали что-то где-то еще.
Рефакторинг должен быть легко. Эти смешанные поведения должны быть более очевидными, что они не принадлежат к компоненту. Они не должны использовать внутренние органы компонента. ?
Компоненты высшего порядка
Мы можем достичь аналогичного эффекта и сделать его немного волшебным путем создания контейнера, который проходит в реквизитах! Основная компромисса наследования – это делает рефакторинг сложнее, поэтому давайте попробуем композицию!
Хотя это больше кода, мы двигаемся в правильном направлении. У нас есть все преимущества смеси. Теперь у нас есть
Что если мы хотели сделать что-то другое? Нам всегда нужно сделать новый компонент?
Рендер реквизит и детей как функция
Это шаблон, который смотрел на нас в лицо всему времени. Все, что мы хотим, это компонент, который обрабатывает поведение перемещения мыши, и способность рендерировать все, что мы хотим.
Это тонкая разница имеет несколько красивых удивительных преимуществ
- Сейчас супер очевидно, что обеспечивает
хиyОтказ Вы также можете легко переименовать их, чтобы предотвратить поименные столкновения. - У нас есть гибкий контроль над тем, что делает рендеринг. Нам не нужно делать новые компоненты, и если мы решим, это просто простая копия.
- Вы можете видеть все это непосредственно в компонентах рендеринга функции. Это на виду и легко для новых разработчиков, которые выявляются, чтобы идентифицировать.
CMD + Fпроверяет здесь.
Основная проблема с этим шаблоном состоит в том, что ваши компоненты привязаны к гнезду довольно много из них в их рендерах. После того, как вы начнете вкладывать несколько компонентов RENDER SPOP, может быть невероятно трудно рассуждать, что происходит.
Кроме того, он создает ложное чувство иерархии. То, что поведение «вложено» под другим поведением, не означает, что он зависит от родительского поведения. Возьмите, например, этот фрагмент.
Если бы только был способ иметь всю эту силу, в декларативном и плоском пути. ?
Крючки
Что, если бы мы могли удалить гнездо, и пузырь все до вершины? Таким образом, единственный JSX в нашей функции Render является чистой логикой рендеринга.
Это все, что я когда-либо хотел.
- Не только поведение в своем собственном маленьком пакете,
Useffectостанавливает его от распространения на трех разных крючках жизненного цикла - Там, где компонент получает эти данные, неведомочивается, он аккуратно расположен внутри функции рендеринга.
- Независимо от того, сколько из них мне нужно ввести, мой код не станет все более вложенным.
Sunil Pai использовал несколько умных подсветков в Tweet ниже, чтобы проиллюстрировать, насколько эффективными крючками не только уменьшают общий объем кода, но и группировки смежных деталей.
Тем не менее, есть некоторые ловли
При использовании крючков вы должны помнить пару правил, которые могут показаться странными в первую очередь:
⚠️ Вы должны вызвать крючки на верхнем уровне функции рендеринга.
Это означает не условные крючки. Наш контракт с реакцией заключается в том, что мы будем называть столько же крючков, в том же порядке каждый раз.
Это правило начинает иметь больше смысла, когда вы сравниваете его с тем, как работают смесины, а HOCS. Вы не можете условно использовать их и изменить их на каждом рендере.
Если вы хотите условные эффекты, вы должны разделить крючки в другие компоненты или рассмотреть другой шаблон.
️️⚠️ Вы можете использовать крюки только в компонентах функции RACT и в пользовательских крючках.
Я не уверен, что на самом деле есть какие-либо технические причина, чтобы не пытаться позвонить им в обычную функцию. Это гарантирует, что данные всегда видны в компонентном файле.
⚠️ Нет примитивов крючков для компонентаdidcatch или getsnapshotbeforeupdate.
Команда Ract говорит, что они на пути!
Для корпуса используют ComponentDidCatch, вы можете создать граничный компонент ошибки, getsnapshotbeforeupdate немного сложнее, но, к счастью, довольно редко.
Некоторые последние ноты
Я не сомневаюсь, что крючки собираются изменить способ, которым мы рассматриваем реагирование, и встряхните несколько лучших практик. Сумма возбуждения и библиотек появляется вдохновляющая!
Тем не менее, я видел шумиху для всех этих шаблонов дизайна в прошлом. Хотя большинство из них оказались очень ценными инструментами на наших инструментах, все они приходят с ценой.
Я до сих пор не полностью понимаю компромиссы крючков, и это пугает меня. Я настоятельно рекомендую играть с ними и учиться на примере. Вы, вероятно, должны немного подождать, прежде чем делать полное переписать в них, хотя?
Если у вас есть какие-либо вопросы или ищете настраивание по реагированию One-One, не стесняйтесь твитнуть мне @Yurkaninryan любое время!
Если вам нравится мой стиль письма, вот некоторые другие статьи, которые я сделал.
Удачи и счастливые кодировки !! ?