Наилучшая практика для повышения производительности при использовании модального режима на реагировать - PullRequest
Новая
       54

Наилучшая практика для повышения производительности при использовании модального режима на реагировать

0 голосов
/ 29 апреля 2020

У меня есть данные о пользователях, которые я показываю на модальных моделях (response-native-router-flux modal). Я использую ленивую загрузку, чтобы открыть интенсивную часть того компонента, который я показываю на модале. При первой загрузке он работает, как я ожидаю, и напрямую открывает модал и показывает индикатор загрузки и, в конечном счете, ленивую часть, которая отображается. Но после того, как я пытаюсь открыть модал, он как бы замирает почти на секунду, и он непосредственно открывает весь визуализированный компонент внутри модала. Я уже использую методы запоминания, чтобы повысить производительность, но, похоже, она не работает.

Я бы хотел кэшировать / запоминать профили пользователей, которые я посетил, и последующие посещения немедленно откроют модальный режим и ленивая загрузка. должен работать для непосещенных.

Я открыт для всех предложений.

Приложение. js, где находится маршрутизатор 

<Router >
    <Scene key="root" >

     .
     .
     .

      <Scene
        key="contactDetails"
        component={ContactDetails}
        hideNavBar
        modal
        title="Contact Details"
      />
    </Scene>
</Router>

ContactDetails компонент, который я рендерил для модального 

const DetailScrollView = React.lazy(() =>
  import('../components/ContactDetails/DetailScrollView')
);

export const ContactDetails = 
  ({personName, personPhoneNumber, personSocialAccounts, personAvatar}) => {

  .
  .
  .

    return (
      <View style={styles.fillAvailableHeight}>
        <View style={styles.topContentWrapper}>
          <View
            style={styles.imageAndMetricsWrapper}>

            .
            .
            .

          </View>
        </View>

        <Suspense
          fallback={
            <Spinner
              style={styles.centralizeSelf}
              color={GlobalColors.darkGray}
            />
          }>
          <DetailScrollView phoneNumbers={personPhoneNumber} />
        </Suspense>
      </View>
    );
  }

DetailScrollview рендеринг группы списков, и это занимает время, около секунды.

...