Проблема
В настоящее время я разрабатываю мобильное приложение, похожее на социальные сети, с использованием React Native. В этом приложении я использую два ключевых компонента: FlashList из @shopify/flash-list для рендеринга сообщений и react-native-video для управления воспроизведением видео. Однако я столкнулся с проблемным поведением, когда компонент react-native-video обновляется каждый раз, когда я обновляю состояние с помощью Zustand. Эта постоянная проблема с обновлением не только приводит к значительному снижению производительности, но и к сбоям на устройствах Android.
Структура кода
Вот обзор структуры моего кода:
// Другой импорт... импортировать { FlashList } из '@shopify/flash-list' // Другой импорт... // Компонент импортировать SocialContents из «../../comComponents/Recognition/Contents» // Магазин Зустанд импортировать useSocialWallStore из '../../store/useSocialWallStore' const XXX = ({ реквизит, маршрут }) => { const { getSocialWallContent,socialWallContents } = useSocialWallStore((состояние) => состояние) const генерироватьНовыеДанные = () => { // Генерируем новые данные... } // Другой код... const SocialContentsMemo = React.memo(SocialContents) const wallData =socialWallContents?.contents.sort( (a, b) => Date.parse(b.dateCreatedUtc) - Date.parse(a.dateCreatedUtc), ) возвращаться ( {/* Другие коды здесь... */} генерироватьНовыеДанные()} onEndReachedThreshold={0.1} ScrollEventThrottle={50} клавиатураShouldPersistTaps="обработано" contentContainerStyle={{ отступГоризонтальный: 18, отступНиз: 225, отступТоп: 0, }} данные = {wallData} keyExtractor={(_, index) => index.toString()} renderItem={({ элемент, индекс }) => ( )} ListFooterComponent={() => SocialWallContents?.loadingЕще && ( ) } /> {/* Другие коды здесь... */} ); } экспортировать по умолчанию XXX Кроме того, вот как я показываю видео в компоненте SocialContents:
{data?.mediaUrl && ( {['.mp4', '.webm', '.avi', '.mov', '.mkv', '.flv'].some( (формат) => data.mediaUrl.endsWith(формат), ) ? ( setIsBuffered(true)} /> {!isBuffered && ( )} ) : ['jpg', '.jpeg', '.png', '.gif'].some((format) => data.mediaUrl.endsWith(формат), ) ? ( // Для отображения изображений... ) : ['mp3', '.wav', '.ogg'].some((format) => data.mediaUrl.endsWith(формат), ) ? ( // Для обработки звука... ) : нулевой} )} Версия/Пакет:
"react-native-video": "^5.2.1", "@shopify/flash-list": "^1.6.1", "zustand": "^4.0.0", "реагировать-родной": "0.69.4", "реагировать": "18.0.0", Если у вас есть какие-либо вопросы или вам нужна дополнительная помощь по этому вопросу, спрашивайте.
Чрезмерное обновление компонента React Native Video при обновлениях состояния Zustand приводит к снижению производительн ⇐ Android
Форум для тех, кто программирует под Android
1695798739
Anonymous
Проблема
В настоящее время я разрабатываю мобильное приложение, похожее на социальные сети, с использованием React Native. В этом приложении я использую два ключевых компонента: FlashList из @shopify/flash-list для рендеринга сообщений и react-native-video для управления воспроизведением видео. Однако я столкнулся с проблемным поведением, когда компонент react-native-video обновляется каждый раз, когда я обновляю состояние с помощью Zustand. Эта постоянная проблема с обновлением не только приводит к значительному снижению производительности, но и к сбоям на устройствах Android.
Структура кода
Вот обзор структуры моего кода:
// Другой импорт... импортировать { FlashList } из '@shopify/flash-list' // Другой импорт... // Компонент импортировать SocialContents из «../../comComponents/Recognition/Contents» // Магазин Зустанд импортировать useSocialWallStore из '../../store/useSocialWallStore' const XXX = ({ реквизит, маршрут }) => { const { getSocialWallContent,socialWallContents } = useSocialWallStore((состояние) => состояние) const генерироватьНовыеДанные = () => { // Генерируем новые данные... } // Другой код... const SocialContentsMemo = React.memo(SocialContents) const wallData =socialWallContents?.contents.sort( (a, b) => Date.parse(b.dateCreatedUtc) - Date.parse(a.dateCreatedUtc), ) возвращаться ( {/* Другие коды здесь... */} генерироватьНовыеДанные()} onEndReachedThreshold={0.1} ScrollEventThrottle={50} клавиатураShouldPersistTaps="обработано" contentContainerStyle={{ отступГоризонтальный: 18, отступНиз: 225, отступТоп: 0, }} данные = {wallData} keyExtractor={(_, index) => index.toString()} renderItem={({ элемент, индекс }) => ( )} ListFooterComponent={() => SocialWallContents?.loadingЕще && ( ) } /> {/* Другие коды здесь... */} ); } экспортировать по умолчанию XXX Кроме того, вот как я показываю видео в компоненте SocialContents:
{data?.mediaUrl && ( {['.mp4', '.webm', '.avi', '.mov', '.mkv', '.flv'].some( (формат) => data.mediaUrl.endsWith(формат), ) ? ( setIsBuffered(true)} /> {!isBuffered && ( )} ) : ['jpg', '.jpeg', '.png', '.gif'].some((format) => data.mediaUrl.endsWith(формат), ) ? ( // Для отображения изображений... ) : ['mp3', '.wav', '.ogg'].some((format) => data.mediaUrl.endsWith(формат), ) ? ( // Для обработки звука... ) : нулевой} )} Версия/Пакет:
"react-native-video": "^5.2.1", "@shopify/flash-list": "^1.6.1", "zustand": "^4.0.0", "реагировать-родной": "0.69.4", "реагировать": "18.0.0", Если у вас есть какие-либо вопросы или вам нужна дополнительная помощь по этому вопросу, спрашивайте.
Ответить
1 сообщение
• Страница 1 из 1
Перейти
- Кемерово-IT
- ↳ Javascript
- ↳ C#
- ↳ JAVA
- ↳ Elasticsearch aggregation
- ↳ Python
- ↳ Php
- ↳ Android
- ↳ Html
- ↳ Jquery
- ↳ C++
- ↳ IOS
- ↳ CSS
- ↳ Excel
- ↳ Linux
- ↳ Apache
- ↳ MySql
- Детский мир
- Для души
- ↳ Музыкальные инструменты даром
- ↳ Печатная продукция даром
- Внешняя красота и здоровье
- ↳ Одежда и обувь для взрослых даром
- ↳ Товары для здоровья
- ↳ Физкультура и спорт
- Техника - даром!
- ↳ Автомобилистам
- ↳ Компьютерная техника
- ↳ Плиты: газовые и электрические
- ↳ Холодильники
- ↳ Стиральные машины
- ↳ Телевизоры
- ↳ Телефоны, смартфоны, плашеты
- ↳ Швейные машинки
- ↳ Прочая электроника и техника
- ↳ Фототехника
- Ремонт и интерьер
- ↳ Стройматериалы, инструмент
- ↳ Мебель и предметы интерьера даром
- ↳ Cантехника
- Другие темы
- ↳ Разное даром
- ↳ Давай меняться!
- ↳ Отдам\возьму за копеечку
- ↳ Работа и подработка в Кемерове
- ↳ Давай с тобой поговорим...
Мобильная версия