Извините, это было немного легко 😂
Как написать статью о React Hooks, когда так много уже опубликовано? Это вопрос, который я задал себе, прежде чем начать этот. Я почти отказался от этой идеи, а затем наконец нашел кучу веских причин для продолжения:
- Во -первых, если вы не напишите что -то, что кто -то уже писал, вы никогда ничего не напишите.
- Я намерен начать серию после моего собственного путешествия, используя крючки на существующем проекте, поэтому мне нужна точка входа.
- Будучи немного шумихим, обусловленным природой, используя Recompose (см. Ниже) в течение долгого времени, просмотрел React Fiber под капотом и имея возможность протестировать крючки на ранней стадии, у меня может быть несколько интересных представлений об этой новой функции.
Поэтому я просто начну эту статью, учитывая, что вы знаете основы React, но ничего о крючках.
Отреагировать состояние искусства перед крючками
Существует два основных способа создания компонента React: создав класс или функцию.
Функциональный компонент более модный, потому что он короче и хорошо вписывается в сообщество, влюбленное в функциональное программирование. Чтобы идти дальше, это прямое применение концепции React, в котором говорится, что компонент является прямым преобразованием входных свойств в разметку.
Но перед крючками функциональные компоненты были действительно ограничены. Нет состояния, нет жизненного цикла, вы смогли использовать эти компоненты только для действительно простых вариантов использования.
Чтобы иметь полный контроль, вы должны были преобразовать свой компонент в классную версию.
Я не хочу вводить бесконечные дебаты «функции по сравнению с классами», давайте просто скажем, что переход с одного на другое каждый раз, когда вам нужна переменная состояния было болезненным (если у вас нет необычных функций в вашем редакторе как в веб -столе).
Компоненты высшего порядка (HOC)
Образец появился в сообществе React. Сейчас это очень распространено и удивительно не эквивалентно в других рамках: Hoc.
По сути, он состоит в функции, которая принимает компонент в аргументе и возвращает новый компонент, обертывающий ваш компонент и проходящие реквизиты, позволяя вам использовать определенные функции.
Этот шаблон быстро распространился, и существует несколько библиотек с открытым исходным кодом, которые в основном полагаются на HOC, чтобы получить доступ к хранилищу Redux, внедрить данные GraphQL, получить перевод I18N и так далее.
Этот шаблон имеет много преимуществ:
- Ваши собственные компоненты могут оставаться простыми, чаще всего они могут быть функциональным компонентом.
- Каждая функция, которую использует ваш компонент, может быть легко идентифицирована. Это может быть даже разделено между несколькими компонентами.
Те, кому больше всего понравился этот шаблон, даже думали, что все делали с HOC. Существует де -факто библиотека, посвященная этой концепции, которая называется Recompose Анкет Recompose предлагает целую кучу базовых HOC для использования каждого аспекта React, вам просто нужно составить свой HOC с каждой функцией, которая вам нужна.
Я был большим поклонником Recompose, я построил с собой целые приложения, не используя абсолютно никаких классовых компонентов вообще. Это было отлично для структуры кода и повторного использования логики.
Но у HOC есть реальные недостатки, которые вы должны понять:
- Концепция инкапсуляции компонентов нелегко задержать. Мне все еще нужен момент размышления при написании одного с нуля.
- Инкапсулируют 2, 4, иногда 6 или 8 компонентов вокруг того, что вы написали, имеет накладные расходы, это факт. Это может быть не тяжело но это правда.
- HOC действительно делает вашу панель отладки выглядеть как беспорядок. Это заставляет меня вспомнить темные дни JavaScript обратного вызова ада!
Крюк!
Вау, наконец, главная тема! Я хотел объяснить контекст использования в сообществе React, чтобы понять, какие проблемы пытаются решить крючки. Теперь мы готовы!
Крюки позволяют использовать состояние и другие функции реагирования без написания класса. Вы также можете Постройте свои собственные крючки поделиться многоразовой логикой состояния между компонентами.
Это прямая цитата из Официальное объявление из выпуска React 16.8.0, который содержит крючки (да, они уже выпущены!)
Если бы я попробовал свое собственное объяснение, я бы сказал, что есть новый набор простых функций, которые вы можете использовать в функциональных компонентах для доступа ко всем функциям React, только то, что вы не могли бы сделать раньше.
Эти функции запускают основные функции реагирования, и вы можете использовать их напрямую. Вы также можете, и поощряются сделать это , составьте их, чтобы сделать более продвинутые. Или это будут ваши любимые фреймворки, которые будут использовать их, чтобы предоставить вам доступ к их функциям.
Есть 3 основы, которые легко запомнить:
- USESTATE объявить новую переменную состояния для компонента
- Использоватьэффект взаимодействовать с жизненным циклом компонента
- USECONTEXT Чтобы получить контекст ценность
Полный API можно найти в официальной документации React.
Поскольку я глубоко внедрил HOC, вы можете видеть крючки в качестве комбинации хороших частей HOC: организация и обмена функциями компонентов, без их плохих частей: обширная компонентная инкапсуляция.
Для меня, как пользователь Recompose, крючки превратили одну из моей любимой библиотеки совершенно бесполезной, но что может быть лучше, библиотека может быть, кроме обобщения концепции непосредственно в рамках, которая пыталась заполнить бланк?
Для тех, кто обеспокоен перекомплектованием, вы должны знать, что создатель Эндрю Кларк В настоящее время в команде React Core, он работал над кодированием крючков и официально заявлено, что ему суждено отказаться Анкет Большой до него!
Что не сказано на этом этапе, так это то, что крючки полностью совместимы с ретро. Компоненты классов по -прежнему работают, как и прежде, HOC все еще работает так же. Команда React Core даже не советует разработчикам агрессивно преобразовать свои кодовые базы (именно то, что я не буду делать 😇), а скорее советует привыкнуть к ней по нескольким новым компонентам, прежде чем рассмотреть вопрос о старых.
Почему это так захватывающе?
Если вы являетесь веб -разработчиком JavaScript, таким как я, возможно, вы уже думаете обо всех преимуществах, которые вы можете получить от этой новой функции, и почему она действительно важна, а не просто новый гаджет среди других.
И все же я думаю, что это хорошее упражнение, чтобы подвести итог. Давайте представим, как будет выглядеть мир реагирования, полный крючков (я уверен, что сообщество будет широко их принять):
- Конец сегментации между функциональными и классовыми компонентами, по крайней мере, в том же проекте. Функциональные и классовые компоненты становятся личным выбором стиля, так же, как космическое и вкладки или следование запятой…
- Отказ от HOC, чтобы спасти сложность, накладные расходы на производительность и запутывание отладки.
- Если больше нет класса, этого больше нет.
- Поскольку логика компонентов – это просто вызовы функций сейчас, ее можно извлечь в другие файлы, общие, повторные и протестированные гораздо лучше, чем раньше.
Этот последний пункт, безусловно, самый важный. Это то, что я уже попробовал (да, с «А») благодаря интенсивному использованию перекомплектования. У меня нет слов, чтобы сказать вам, как это удивительно, и я очень рад видеть, что теперь я могу реализовать одно и то же, что вы используете саму React!
Как это работает (примерно)
С точки зрения пользователя, вы просто вызовите использование ** функции из своего функционального компонента, и это все. Но как это может быть возможно или даже эффективно, когда вы знаете, что эта функция компонента будет вызвана для каждого обнаружения изменения?
Именно на этом этапе вы обнаружите, что есть правила для использования крючков.
Крюки не являются стандартными функциями.
В двух словах: вы можете вызывать только крючки из функциональных компонентов, и вам всегда нужно использовать одинаковое количество крючков и в одном и том же порядке при каждом выполнении (поэтому вы не помещаете крючки в состояние или цикл).
Имеет смысл взглянуть на реализацию Hook в псевдо -коде.
Первоначально написано Джейми Кайл
Таким образом, каждая функция крюка возвращается к управлению экземпляра React в общем массиве. React контролирует вызов ваш компонент, поэтому он идеально знает, из какого компонента вы использовали крючок.
Массив крючков позволяет реагировать, чтобы соответствовать предыдущему вызову следующему одному крюку, и это объясняет, почему существует правило о сумме и порядок. Эта реализация может быть (и была обсуждена), но основная команда React пришла к выводу, что это лучший выбор, учитывая несколько решений как Дэн Абрамов хорошо объяснил это Анкет
Более во всем мире, так как крючки нельзя вызвать из никуда, в любом порядке, в любое время и т. Д.:
Крюки не являются безопасным шаблоном по дизайну.
Это жертва, которую команда React принесла очень простому API для подавляющего большинства.
Что касается производительности, мы добавляем код в функцию рендеринга, которая называется много раз. Это может иметь стоимость, и мы несем ответственность в качестве разработчиков React за то, что они не делают интенсивных вычислений в этих функциях.
Тем не менее, мы должны вызвать только кучу крючков из этих функций, и мы не должны делать намного больше. Напротив, мы получаем накладные расходы, не определяя и не создаем создания целого класса, который мог бы мне более важно.
Наконец, когда производительность действительно имеет значение, у нескольких крюков есть параметры памяти, которые позволяют разработчику точно определить, когда запускать код.
Давайте напишем несколько крючков!
Это была довольно длинная статья, но мы едва почистили тему. Использование крючков (и только крючков) в целом приложении поднимает гораздо больше вопросов.
Вот почему это только первая, немного теоретическая, статья по этому вопросу. Я планировал написать других во время моего собственного процесса переключения на крючки.
Как скромный клиффхангер, вот что я планировал рассмотреть в следующих статьях:
- Крючки в сторонних рамках (в начале 2019 года)
- Примеры обмена логикой между компонентами
- Сравнение между реконструкцией и крючками
- Крючки и SSR со следующим
- Тестирование пользовательских крючков и компонентов с крючками
Оригинал: “https://dev.to/swiip/react-hooks-my-introduction-563e”