Автор оригинала: FreeCodeCamp Community Member.
Джейк Вислер
Реактивные крючки Предложение приходит с некоторыми Встроенные крюки Это сосредоточиться на том, чтобы сделать одно, например, предоставляющее состояние или контекст к функциональному компоненту. Вы также можете использовать их как строительные блоки для создания Ваш собственный Отказ
В Недавний пост Я поделился некоторыми личными мыслями на предложении крючков. Этот пост будет более техническим, поскольку я иду в дальнейшем в деталях на то, что я считаю самым важным крюком: Уместите Отказ
Как написать это, крючки все еще являются Экспериментальное предложение Отказ Ничто в этом посте не должно считаться финалом. Пожалуйста, имейте это в виду. В настоящее время есть Открыть RFC Там, где вы можете оставаться в точечном предложении, и даже голос ваших проблем, если у вас есть.
Крючки доступны в V16.7.0-Альфа реагировать. Я настроил CodeSandbox Это сделает вас быстро, если вы хотите следовать вместе с примером в этом посте.
Реагировать сегодня
Если вы хотите, чтобы условный компонент в реакции, ваш единственный вариант на данный момент – написать этот компонент в качестве класса. Это был источник разочарования для меня. Часто я найду себя, потратив хороший кусок психической энергии, созерцаю, хочу ли я или нет рефакторов идеально приемлемо Функциональный компонент в класс просто для удержания какого-либо состояния.
Я убедимся, что избегая такого рефакторов в моих интересах. В конце концов я окажусь от кроличьей дыры государственных стратегий управления, библиотек и «Другие решения» Отказ
Если вещи Действительно Иди на юг, я начну спрашивать, даже компонент даже нужно Состояние в первую очередь, как будто это то, что следует избегать.
Это звучит чрезмерным, и это, вероятно, есть. Но это случилось. И если вы потратили значительное количество времени, работающих с реагированием, вы, возможно, оказались, на этом диком гусеном погоне, а также (или, возможно, это только я?).
Добавление состояния в компонент должен чувствовать естественное, но трудно чувствовать естественное, когда я пишу класс.
Введите крючок
С Уместите Крюк, функциональные компоненты теперь могут удерживать локальное состояние.
Уместите Это функция, которая принимает начальное состояние и возвращает массив с 2 элементами:
- Текущее состояние
- Функция, которая может быть вызвана для обновления состояния
Из-за того, как произведения по разрушению массива мы можем назвать предметы, возвращаемые Уместите все, что мы хотим. На нас не существует ограничения API. Как конвенция, кажется, что экосистема RACT React принимает к [Значение, SetValue] синтаксис.
В приведенном выше примере цвет это значение государства и инициализируется на «Зеленый» Отказ Сетколь Функция может быть вызвана для обновления этого значения.
Обратите внимание, что, в отличие от компонента класса, состояние в функциональной компоненте не нужно быть объектом. Вот это просто строка.
Другое важное примечание заключается в том, что функция обновления в этом случае Сетколь , не слияние Новое состояние с текущим, но вместо этого Переопределяет Это полностью. Это отличается от того, как this.setState Работает в классовых компонентах.
Обновление состояния
Значение цвет будет сохраняться между рендерами (подробнее об этом ниже), Если Сетколь Функция вызывается с новым значением:
Когда кнопка нажала, функция медленно позвоню Сетколь со значением «Желтый» Отказ Это приведет к тому, что Уличный свет компонент для повторного визуализации. Когда это делает, цвет Переменная будет обновляться до «Желтый» Отказ
Чего ждать?
На первый взгляд, вы думаете, что каждый раз Уличный свет оказывает, это называет Уместите со значением «Зеленый» Отказ Так как можно цвет быть чем угодно Но зеленый?
Логический вопрос. Вот несколько строк из Реагистрировать документы это может помочь легкость Вы в этой концепции:
Но как?
Это не волшебство, это JavaScript!
Проще говоря, отреагируйте отслеживает звонков на Уместите Для каждого компонента внутренне. Он также создаст отображение между функцией обновления и значением состояния, для которого он обновляется.
Начальное значение передано Уместите возвращается на первый рендер, но оттуда реагируют вернут правильное значение на основе отображения. Он также использует карту, чтобы узнать, какой ломтик состояния мутитировать, когда вызывается функция обновления.
Это может казаться озадаченным вам, и вы не одиноки. Я был сбит с толку тем, как это могло работать. Моя путаница увеличилась только тогда, когда я узнал, что Вы можете иметь несколько звонков к Уместите В том же компоненте:
Да, вы можете сделать это с контентом вашего сердца.
Как реагировать следить за состоянием?
Для того, чтобы все это было работать, отреагируйте, что вы следите за Несколько правил :
- Вызов крючков на верхнем уровне функции
- Вызов крючков из функциональных компонентов и Пользовательские крючки
Реагировать навязывает эти правила, потому что это опирается на порядок вызова крючков правильно управлять данными. Сначала это может показаться непосвященным, но эти правила не трудно следовать. И совсем откровенно я не могу придумать сценарий, где вы хотели бы сломать их.
Для того, чтобы усваивать, как реагируют управляют крючками в ваших компонентах, я Высоко Рекомендовать читать Этот средний пост по Руди Ярдли Отказ Это было важно в моем учебном процессе. ?
И вот a Psuedo-реализация о том, как реагированные управляющие крючки, изначально опубликованные Jamiebuilds в Твиттере.
Обертывание
Я считаю Уместите быть строительным блоком. Вы можете использовать это как – это Чтобы обеспечить состояние к вашим компонентам функции, или вы можете использовать его для абстрактной государственной логики в Пользовательские крючки !
Я считаю, что пользовательские крючки будут самыми крупнейшими сверхдержавыми разработчиками реагирования наберутся, когда V16.7 Земли и Уместите это фундамент. Сообщество уже разделяет некоторые потрясающие вещи С пользовательскими крючками и этот шаблон будут расти только в геометрической прогрессии.
Я надеюсь, что вы нашли эту статью полезную. Пожалуйста, обратитесь к мне на Twitter Если у вас есть какие-либо вопросы, а как всегда, счастливое кодирование!
Первоначально опубликовано www.jakewiesler.com .
Эй, друг, спасибо за чтение! Имена Джейк Отказ Я люблю строительные пользовательские интерфейсы и Напиши об этом каждую неделю. Я также бегаю небольшую рассылку называемую Оригинальная копия . Это случайное и беззаботное дело. Если это звучит как ваша чашка чая, рассмотрим подписку!