react-native hooks 渲染速度慢 多个useState问题

首先,需要检查出为什么速度慢

自定义时间工具,标记检测时间


function watchTime() {
  let quie: { falgStr: any; time: number }[] = []

  return (falgStr?: string, status = '', falgTimeList: string[] = [], isRest = false) => {
    if (status === 'one' && quie.find(v => v.falgStr === falgStr)) {
      return false
    }
    if (isRest) {
      quie = []
    }
    quie.push({
      falgStr: falgStr,
      time: new Date().getTime()
    })
    if (quie.length === 1) {
      const first = quie[0]
      console.log(`watchTime--------------------------***--------    0   :`, first.time, ' 标记:', falgStr)
    } else if (quie.length > 1) {
      const first = quie[0]
      const prev = quie[quie.length - 2]
      const current = quie[quie.length - 1]
      console.log(`watchTime--------------------------***--------    ${current.time} `, ' 标记:', falgStr)
      console.log(`距离上一个间隔时间${current.time - prev.time}`)
      console.log(`距离第一个间隔时间${current.time - first.time}`)
      if (falgTimeList && falgTimeList.length && Array.isArray(falgTimeList)) {
        falgTimeList.forEach(v => {
          const index = quie.findIndex(v2 => v2.falgStr === v)
          if (index !== -1) {
            const falgQ = quie[index]
            console.log(`距离${falgQ.falgStr} 间隔时间${current.time - falgQ.time}`)
          }
        })
      }
    }
  }
}

const logWatchTime = watchTime()



const api = new Promise((resolve) => setTimeout(() => {resolve()}, 1000))
export defualt function(){
    logWatchTime('init-detail-fn', 'one', [], true)
const onRefresh = () => {
        logWatchTime('onRefresh-before')
  api.then(() => {
        logWatchTime('onRefresh')
  setState()
  setState()
  setState()
        logWatchTime('onRefresh-02', '', ['onRefresh-before'])
  setState()
  setState()
  setState()
        logWatchTime('onRefresh-end')
})
}
}

这里可用清晰检测到, 多个useState后, 明细速度会慢很多, 因此, 把多个useState合并成一个, 可用让这中间的速度给增快很多。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容