react-native渲染太慢怎么办---nteraction

nteractionmanager 可以将一些耗时较长的工作安排到所有互动或动画完成之后再进行。这样可以保证 JavaScript 动画的流畅运行。

import React from 'react'
import { useEffect, useState } from 'react'
import { InteractionManager, View, Text, ActivityIndicator } from 'react-native'
import ErrorBoundary from './ErrorBoundary'
function AsyncRender(props: any) {
  const [show, setShow] = useState(false)
  const useMount = (func: Function, params: any[] = []) => useEffect(() => func(), params)
  useMount(() => {
    const interactionPromise = InteractionManager.runAfterInteractions(() => setShow(true))

    return () => interactionPromise.cancel()
  }, props.list)

  if (!show) {
    return (
      <View>
        <ActivityIndicator size="small" />
      </View>
    )
  } else {
    try {
        return <ErrorBoundary>{props.children}</ErrorBoundary>
    } catch {
        return <></>
    }
  }
}

export default React.memo(AsyncRender)