javascript 优化性能换画面数据-loading.js

Posted 2021-05-04

import React, { Component } from 'react'
import {
  View,
  InteractionManager
} from 'react-native'

export default class Screen extends Component {
  constructor (props) {
    super(props)
    this.state = {
      screenLoading: true,
      contacts: null
    }
  }
  
  componentDidMount () {
    InteractionManager.runAfterInteractions(() => {
      // call API to get data after component was mounted
      Api.getContacts().then(contacts => {
        this.setState({
          contacts,
          screenLoading: false
        })
      })
    })
  }

  render () {
    const { screenLoading, contacts } = this.state
    if (screenLoading) return <LoadingView />

    return (
      <View>
        ...rendering data
      </View>
    )
  }
}