首先,需要检查出为什么速度慢
自定义时间工具,标记检测时间
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合并成一个, 可用让这中间的速度给增快很多。