动画滞后于大量重新渲染

Question

我的简化代码是这样的

const Component = () => {
const [data, setData] = React.useState()
React.useEffect(() => {
async function asyncEffect() {
const dataFromDb = await getAlotOfDataFromBackend()
setData(dataFromDb)
}
asyncEffect();
})
return data? <SvgLoadingAnimation/> : <Table data={data}/>
}

我的问题是加载动画在调用 setData 的那一刻开始严重滞后。 我该如何解决这个问题？

Answer 1

也许你应该等待响应，而不是在它返回之前设置数据

const Component = () => {
const [data, setData] = React.useState(null)
React.useEffect(() => {
const getData = async () => {
const dataFromDb = await getAlotOfDataFromBackend()
setData(dataFromDb)
}
getData()
},[setData])
return !data ? <SvgLoadingAnimation/> : <Table data={data}/>
}