Обновление React Native 0.76: Новая Архитектура по Умолчанию, React Native DevTools и Другие Улучшения
Недавно вышло обновление React Native 0.76, которое принесло значительные изменения и улучшения в экосистему разработчиков. В этом выпуске по умолчанию включена Новая Архитектура, представлены React Native DevTools и внедрены другие важные обновления, результат многолетних усилий команды разработчиков и поддержки сообщества.
1. Новая Архитектура React Native по умолчанию
4. Новые стилевые свойства: Box Shadow и Filter
5. Изменения, нарушающие обратную совместимость
Новая Архитектура React Native по Умолчанию
С выходом версии 0.76 Новая Архитектура React Native становится стандартом для всех новых проектов. Эта переработка внутренних механизмов платформы направлена на улучшение производительности и упрощение разработки высококачественных нативных приложений с использованием React. Команда разработчиков объявила, что Новая Архитектура готова к использованию в продакшене, что открывает новые возможности для разработчиков и обещает значительное развитие React Native в будущем.
React Native DevTools
Одним из ключевых обновлений стало введение React Native DevTools — нового инструмента для отладки приложений. Этот инструмент предлагает разработчикам знакомый интерфейс, основанный на Chrome DevTools, с надежными точками останова, просмотром значений переменных, пошаговой отладкой и мощной консолью JavaScript. Кроме того, интеграция с React DevTools улучшена, что позволяет быстрее и надежнее инспектировать компоненты и профилировать приложения.
Особо стоит отметить улучшенный пользовательский опыт: новое наложение «Paused in Debugger» ясно показывает, когда приложение приостановлено на точке останова, а предупреждения в LogBox теперь отображаются сводкой и скрываются при подключении DevTools. Также DevTools поддерживают мгновенный запуск без дополнительной настройки, что значительно упрощает процесс отладки.
Ускоренная работа Metro
В версии 0.76 была значительно улучшена производительность Metro, сервера, отвечающего за сборку и разрешение модулей. Разработчики отметили, что разрешение модулей стало примерно в 15 раз быстрее, а время сборки «теплых» сборок увеличилось примерно в 4 раза. Эти улучшения существенно сокращают время ожидания разработчиков и делают процесс разработки более плавным и эффективным.
Новые стилевые свойства: Box Shadow и Filter
Обновление также включает два новых стилевых свойства, доступных только в Новой Архитектуре:
• boxShadow: Позволяет добавлять тени к элементам с возможностью настройки позиции, цвета, размера и размытия тени. Поддерживает как строковый формат, аналогичный CSS, так и объектный формат для большей гибкости.
• Цвет тени по умолчанию — чёрный.
• Поддержка обычных теней начиная с версии Android 9+ и поддержка inset-теней начиная с версии Android 10+.
• filter: Применяет графические фильтры к элементам, такие как яркость, насыщенность, оттенок, размытие и тени. Также поддерживает как строковый, так и объектный форматы.
• На iOS поддерживаются только яркость и непрозрачность.
• На Android фильтры размытия и теней поддерживаются только на Android 12+.
• Свойство filter подразумевает overflow: hidden, поэтому дочерние элементы будут обрезаться, если выходят за границы родителя.
Breaking Changes
С обновлением пришли и некоторые изменения, которые могут потребовать внимания разработчиков:
1. Удалена зависимость от @react-native-community/cli:
React Native стал фреймворк-агностичным, что позволяет команде быстрее развивать проекты независимо друг от друга. Разработчикам, использующим CLI в своём рабочем процессе, необходимо явно добавить зависимости на CLI в package.json проекта.
// …
"devDependencies": {
// …
"@react-native-community/cli": "15.0.0",
"@react-native-community/cli-platform-android": "15.0.0",
"@react-native-community/cli-platform-ios": "15.0.0",
},2. Уменьшение размера Android-приложений на ~3.8 МБ:
За счёт слияния нативных библиотек в libreactnative.so размер приложений на Android уменьшился примерно на 3.8 МБ (около 20% от общего размера), а время запуска приложения сократилось на ~15 мс (~8%). Однако это изменение требует от разработчиков обновления метода onCreate в классе MainApplication для корректной загрузки новой библиотеки.
import com.facebook.react.soloader.OpenSourceMergedSoMapping
import com.facebook.soloader.SoLoader
class MainApplication : Application(), ReactApplication {
override fun onCreate() {
super.onCreate()
SoLoader.init(this, OpenSourceMergedSoMapping)
}
}3. Обновление минимальных требований к SDK:
• Android: с SDK 23 до SDK 24 (Android 7)
• Анимации: Остановлено отправление обновлений состояния в React при зацикленных анимациях, что предотвращает ненужные перерисовки.
• DevTools: Удалены вкладки производительности и сети в инспекторе под Новой Архитектурой.
• Текстовый движок: Всегда используется AttributedStringBox вместо AttributedString в TextLayoutManager.
• Android: Изменена реализация фона представлений.
• iOS: Удалён макрос RCT_EXPORT_CXX_MODULE_EXPERIMENTAL для автосвязывания чистых C++ модулей.
Разработчикам рекомендуется воспользоваться React Native Upgrade Helper для просмотра изменений кода между версиями. Пользователи Expo смогут воспользоваться React Native 0.76 в составе Expo SDK 52. Для создания нового проекта через CLI можно использовать следующую команду:
npx @react-native-community/cli@latest init MyProject --version latest
Важно: Версия 0.76 теперь является последней стабильной версией React Native, а серия 0.73.x больше не поддерживается. Для получения дополнительной информации следует ознакомиться с политикой поддержки React Native.
В целом, обновление React Native 0.76 приносит значительные улучшения и новые возможности, делая платформу ещё более мощной и удобной для разработчиков. Сообщество с нетерпением ожидает дальнейших обновлений и новых функций, которые продолжат развивать экосистему React Native.