Версия React 16.8: версия с хуками

Оригинальный автор: Дэн Абрамов

Переводчик: Джоти, UC International R&D

Спереди написано: Добро пожаловать в официальный аккаунт «UC International Technology», мы предоставим вам качественные технические статьи, связанные с клиентом, сервером, алгоритмом, тестированием, данными, интерфейсом и т. д., не ограничиваясь оригинальностью и перевод.

С выпуском React 16.8,React HooksТакже выпущена стабильная версия!

Что такое крючки?

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

Если вы никогда раньше не слышали о хуках, вам могут быть интересны следующие ресурсы:

• Введение в хукиОбъясняет, почему мы добавили хуки в React.
• Обзор хуковэто краткий обзор встроенных хуков.
• Создайте свои собственные крючкиДемонстрирует повторное использование кода с помощью пользовательских хуков.
• Понимание хуков ReactИсследуйте новые возможности, открытые крючками.
• useHooks.comПоказывает использование хуков и демонстрации, поддерживаемые сообществом.

тебе не нужноИзучайте крючки.Критических изменений в хуках нет, и мы не планируем удалять класс из React.Hooks FAQОписывает стратегию, которую мы приняли поэтапно.

Без серьезной перезаписи

Мы не рекомендуем вам переписывать существующее приложение, чтобы сразу применить хуки. Вместо этого мы предлагаем вам попробовать хуки в некоторых новых компонентах и ​​сообщить нам, что вы об этом думаете. Код, использующий хуки, будет работать с существующим кодом, использующим классы.параллельноРабота.

Могу ли я сейчас использовать хуки?

Да! Начиная с версии 16.8.0, React включает стабильную реализацию React Hooks, которую можно использовать для:

• React DOM

• Сервер React DOM (сервер)

• Тестовый рендерер React

• Реагировать на поверхностный рендерер

осторожность,Чтобы включить хуки, Все пакеты React должны быть обновлены до 16.8.0 или новее.. Хуки не будут работать, если вы забудете обновить такие пакеты, как React DOM.

React Native будетВерсия 0.59Поддерживающие крючки.

Инструментальная поддержка

React DevTools теперь поддерживает React Hooks, как и последние определения React Flow и TypeScript. Мы настоятельно рекомендуем вам включитьпо имениeslint-plugin-react-hooksновые правила lint длячтобы обеспечить соблюдение лучших практик для хуков. Приложение Create React скоро будет включать его.

планирование

Наш недавно выпущенныйДорожная карта реагированияописывает наши планы на ближайшие несколько месяцев.

Обратите внимание, что React Hooks еще не охватывает все варианты использования классов, ноочень близко. В настоящее время толькоgetSnapshotBeforeUpdate()а такжеcomponentDidCatch()Для методов не существует эквивалента Hooks API, и эти жизненные циклы относительно редки. Если вы хотите использовать хуки, вы можете использовать их в большей части нового кода, который вы пишете.

Еще в альфа-версии сообщество React создало множество интересных хуков для анимации, форм, подписок, интеграции с другими библиотеками и т. д.Примера такжеПрименение. Мы в восторге от хуков, потому что они делают код более пригодным для повторного использования, упрощают написание компонентов и создают отличный пользовательский интерфейс. Нам не терпится увидеть, что вы создадите дальше!

Тестовые хуки

В этом релизе мы добавилиReactTestUtils.act()новый API , который гарантирует, что поведение теста будет более точно соответствовать поведению в браузере. Мы рекомендуем инкапсулировать все запуски рендеринга кода и обновления компонентов вact()Вызов. Тестовые библиотеки также могут использовать его для обертывания API (например,react-testing-libraryизrenderа такжеfireEventИнструмент делает именно это).

Например,на этой страницеКонтрпример можно протестировать следующим образом:

правильноact()вызовы также сбрасывают свои внутренние эффекты.

Если вам нужно протестировать пользовательский хук, вы можете создать компонент во время тестирования и использовать его хук, а затем протестировать написанный вами компонент.

Чтобы уменьшить количество повторяющихся шаблонов, мы рекомендуем использоватьreact-testing-library, который побуждает программистов писать тесты, имитирующие поведение пользователей, использующих компонент.

Спасибо

Мы хотим представить всемHooks RFCСпасибо тем, кто поделился своими отзывами. Мы прочитали все ваши комментарии и внесли некоторые изменения в окончательный API на их основе.

Установить

React {#react}

Версия React 16.8.0 опубликована в реестре NPM.

Чтобы установить React 16 с помощью Yarn, запустите:

Чтобы установить React 16 с помощью NPM, запустите:

Мы также предоставляем UMD-сборки React через CDN:

Для получения подробной информации посетитеПодробная установка.

Плагин ESLint для React Hooks

Уведомление

Подводя итог, мы настоятельно рекомендуем вам использоватьeslint-plugin-react-hooksлинтовые правила.

Если вы используете приложение Create React, вместо того, чтобы вручную настраивать ESLint, вы можете дождаться следующей версии.react-scripts, который затем будет включать это правило.

Предполагая, что у вас установлен ESLint, запустите:

Затем добавьте следующую конфигурацию ESLint:

Список изменений

React {#react-1}

• новыйHooks— Способ использовать состояние и другие функции React без написания классов. (@acdliteи др., представленные в#13968)
• УлучшатьuseReducerПерехватите API ленивой инициализации (@acdliteпредставлены в#14723)

React DOM {#react-dom}

• избегать бытьuseStateа такжеuseReducerРендеринг, когда хуки передают одно и то же значение. (@acdliteпредставлены в#14569)
• сравнение не передаетсяuseEffect/useMemo/useCallbackПервый параметр хуков. (@gaearonпредставлены в#14654)
• использоватьObject.isСравнение алгоритмовuseStateа такжеuseReducerценность . (@Jessidhiaпредставлены в#14752)
• поддержка перешла кReact.lazy()синхронно тогда можно.(@gaearonпредставлены в#14626)
• Используйте хуки для рендеринга компонента дважды в строгом режиме (только для разработчиков), чтобы он соответствовал поведению класса. (@gaearonпредставлены в#14654)
• Предупреждать, когда порядок хуков не совпадает в режиме разработки. (@threepointoneпредставлены в#14585а также@acdliteпредставлены в#14591)
• Функция очистки эффекта должна вернутьсяundefinedили функция. не разрешается содержатьnullВсе остальные значения, включая . (@acdliteпредставлены в#14119)

Тестовый рендерер React

• Поддержка хуков в поверхностных рендерерах (@trueadmпредставлены в#14567)
• существует в мелком рендеререgetDerivedStateFromPropsслучай, ремонтshouldComponentUpdateстатус ошибки в . (@chenesanпредставлены в#14613)
• Добавить кReactTestRenderer.act()а такжеReactTestUtils.act()для пакетного обновления, чтобы тесты были ближе к реальному поведению. (@threepointoneпредставлены в#14744)

Плагин ESLint: React Hooks {#eslint-plugin-react-hooks}

• Первый выпуск. (@calebmerпредставлены в#13968)
• Исправление отчетов после зацикливания. (@calebmerа также@Yurickhпредставлены в#14661)
• Не рассматривайте ложные броски как нарушение правил. (@sophiebitsпредставлены в#14040)

Список изменений хуков начиная с альфа-версии {#hooks-changelog-since-alpha-versions}

Приведенный выше журнал изменений содержит изменения по сравнению с последнимстабилизироватьВсе важные изменения с версии (16.7.0).То же, что и все наши минорные версии, ни одно из этих изменений не нарушит обратную совместимость.

Если вы используете хуки из альфа-релиза React, обратите внимание, что этот релиз содержит небольшие критические изменения в хуках.Мы не рекомендуем полагаться на альфу в рабочем коде.Мы выпускаем их, чтобы внести изменения на основе отзывов сообщества, прежде чем API станет стабильным.

Вот все критические изменения, которые мы внесли в хуки с момента первого альфа-релиза:

• Удалите `useMutationEffect`. (@sophiebitsпредставлены в#14336)
• БудуuseImperativeMethodsПереименован в `useImperativeHandle`.@threepointoneпредставлены в#14565)
• избегать бытьuseStateа такжеuseReducerРендеринг, когда хуки передают одно и то же значение. (@acdliteпредставлены в#14569)
• сравнение не передаетсяuseEffect/useMemo/useCallbackПервый параметр хуков. (@gaearonпредставлены в#14654)
• использоватьObject.isСравнение алгоритмовuseStateа такжеuseReducerценность . (@Jessidhiaпредставлены в#14752)
• Визуализируйте компонент только дважды с хуками в строгом режиме (только для разработчиков). (@gaearonпредставлены в#14654)
• УлучшатьuseReducerПерехватите API ленивой инициализации (@acdliteпредставлены в#14723)

Хорошая рекомендация статьи:

Каковы требования Facebook к фронтенд-инженерам? Посмотри

Китайский и английский оригинальный текст:

React v16.8: The One With Hooks

«UC International Technology» стремится делиться с вами высококачественными техническими статьями.

Добро пожаловать, чтобы подписаться на наш официальный аккаунт и поделиться статьей с друзьями