Проблема
В настоящее время я разрабатываю мобильное приложение, похожее на социальные сети, с использованием 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
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
JAVA/HEAP — странное поведение сборки мусора приводит к снижению производительности сервера
Anonymous » » в форуме JAVA - 0 Ответы
- 20 Просмотры
-
Последнее сообщение Anonymous
-