Чрезмерное обновление компонента React Native Video при обновлениях состояния Zustand приводит к снижению производительнAndroid

Форум для тех, кто программирует под Android
Ответить Пред. темаСлед. тема
Anonymous
 Чрезмерное обновление компонента React Native Video при обновлениях состояния Zustand приводит к снижению производительн

Сообщение 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", Если у вас есть какие-либо вопросы или вам нужна дополнительная помощь по этому вопросу, спрашивайте.
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Android»