От автора: в этом посте вы познакомитесь с новейшей версией React.js, а также с общими новостями о будущем.
React — это одна из самых популярных библиотек JavaScript, более 110 000 звезд и более 2 миллионов человек используют ее на GitHub. Множество преданных членов сообщества облегчают жизнь разработчикам, создавая удивительный пользовательский интерфейс, который вошел в новейшую версию: 16.9.0 (React теперь имеет более 100 релизов).
Сегодня мы выпускаем React 16.9. Он содержит несколько новых функций, исправлений и новых предупреждений об устаревании, которые помогут подготовиться к будущему основному релизу. — Блог React
Теперь давайте рассмотрим эти новые функции:
Async Act ()
В последнем основном выпуске React.js была введена новая утилита для тестирования. Она называется act() и помогает разработчикам писать тесты, которые лучше соответствуют поведению различных браузеров.
Хорошим примером является то, как несколько обновлений состояний внутри одного действия объединяются в пакеты, что соответствует нормальному поведению React для обработки событий браузера. В React 16.8 была введена только поддержка действия для синхронных функций, и при ее использовании все еще выдавались предупреждения. Но теперь в новой версии 16.9 появилась поддержка асинхронных функций, так что вы можете ожидать вызовов act.
await act(async () => { // ...});Исправления для предыдущих предупреждений были также включены в эту версию, поэтому все ваши предупреждения исчезнут при обновлении версии React.
Также команда React потратила некоторое время на создание ресурсов, чтобы помочь разработчикам полностью понять, как писать тесты с act(), с помощью нового руководства по приемам тестирования. Оно описывает общие случаи использования и способы применения act() в каждом из них для написания тестов. В примерах используются API-интерфейсы DOM, но вы также можете использовать библиотеку тестирования React.
Измерения производительности с помощью Profiler API
Profiler API для DevTools впервые был выпущен в версии React 16.5. Он помогает разработчикам находить проблемы в веб-приложении. В новой версии 16.9 команда React пошла еще дальше, чтобы улучшить API.
С новым <act.profiler> вы можете программно измерить множество вещей в DevTools при рендеринге DOM, от фазы до времени, и даже продолжительности и взаимодействий. Он идеально подходит для крупных приложений, чтобы постоянно проверять их производительность и регрессию с течением времени. Profiler — это, по сути, измерительный инструмент для рендеринга, который идентифицирует части приложения, которые вызывают замедление и могут быть оптимизированы с помощью мемоизации. </react.profiler>
Profiler выглядит так:
render( <Profiler id="application" onRender={onRenderCallback}> <App> <Navigation {...props} /> <Main {...props} /> </App> </Profiler>);Важно отметить, что они по умолчанию отключены для производственных сред из-за дополнительных затрат. Если вы хотите профилировать производственное приложение, вы можете ознакомиться с этим ресурсом, в котором предоставляется специальная сборка с включенным профилированием.
Переименование небезопасных методов жизненного цикла
В прошлом году в обновлении команда React сообщила нам о решении изменить названия методов жизненного цикла, которые считались небезопасными.
Затрагиваемые методы жизненного цикла перечислены ниже:
componentWillMount → UNSAFE_componentWillMount
componentWillReceiveProps → UNSAFE_componentWillReceiveProps
componentWillUpdate → UNSAFE_componentWillUpdate
Не паникуйте: ваше старое приложение не сломается после этого конкретного обновления, так как старые имена все еще работают. Однако всякий раз, когда они используются, в терминале будет появляться предупреждение:
Предупреждения будут отправлять вам ссылки на ресурсы с альтернативами этим небезопасным методам, но вы можете просто запустить простой скрипт codemod, который входит в приложение и автоматически переименовывает все небезопасные методы жизненного цикла:
cd your_projectnpx react-codemod rename-unsafe-lifecycles
После запуска codemod заменит старые имена, например, componentWillMount, новыми именами, такими как UNSAFE_componentWillMount:
В дальнейшем команда React обещает, что небезопасные методы будут продолжать работать с этим обновлением, и даже в версии 17, которая скоро выйдет. Префикс позволит разработчикам постоянно напоминать об их небезопасности.
Удаление JavaScript-URL
Использовать атрибута javascript: внутри href очень старая практика , но это все еще делается. Команда React считает, что это небезопасная практика, поскольку она может открыть бреши в безопасности веб-приложений.
const userProfile = { website: "javascript: alert('you got hacked')",};// This will now warn:<a href={userProfile.website}>Profile</a>В новой версии React, если вы все еще используете это, вы увидите предупреждения в терминале, которые напомнят вам, что это подвержено уязвимостям, и также предложат решение, подобное использованию обработчиков событий. В будущем, однако, эта практика будет признана устаревшей и поэтому будет выдавать ошибку.
Компоненты Фабрики
Это не повлияет на многих людей, так как не используется широко, но во время компиляции React поддерживаются компоненты Фабрики, которые возвращают объект с помощью метода render; это было еще до Babel.
function FactoryComponent() { return { render() { return <div />; } }}Однако это запутанный шаблон, поскольку его можно использовать вместо компонентов функций, которые вместо этого возвращают значение шаблона. Его поддержка также немного замедляет React во время компиляции, поэтому не рекомендуется. При его использовании будет записано предупреждение, отличной альтернативой должно быть добавление:
FactoryComponent.prototype = React.Component.prototype
В своем файле вы также можете преобразовать его в класс или компонент функции.
Планы на будущее
Вот несколько вещей, которые стоит ожидать от команды React в ближайшем будущем:
В ближайшем будущем планируется реализовать поддержку одновременного режима и приостановки выборки данных в виде одного комбинированного релиза.
Команда начала работу над новым средством рендеринга серверов с поддержкой Suspense, но оно не войдет в упомянутый выше релиз. Тем не менее, в нем будет временное решение, позволяющее существующему средству рендеринга сервера генерировать HTML для аварийных откатов Suspense.
Обновление вашей версии
React v16.9.0 доступен в реестре npm. Чтобы установить React 16 с помощью Yarn, запустите:
yarn add react@^16.9.0 react-dom@^16.9.0
Чтобы установить React 16 с помощью npm, запустите:
npm install --save react@^16.9.0 react-dom@^16.9.0
Вы также можете использовать UMD-сборки React через CDN:
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
Заключение
Мы рассказали о новой версии React и всех новых функциях, с которыми она поставляется. Ожидая следующую основную версию 17, мы также узнали, что в этой второстепенной версии было введено несколько важных замечаний, и вы должны принять их к сведению. Какая ваша любимая функция?
Автор: Nwose Lotanna Victor
Источник: https://www.telerik.com
Редакция: Команда webformyself.