鍍金池/ 問答/HTML/ React 數(shù)據(jù)顯示總是比直接寫在標(biāo)簽中的內(nèi)容慢一步

React 數(shù)據(jù)顯示總是比直接寫在標(biāo)簽中的內(nèi)容慢一步

例如現(xiàn)在頁面上有兩個模塊，分別有“更多”按鈕

圖片描述

點擊更多以后彈出Modal，顯示更多。關(guān)閉之后，再點擊另一個“更多”，會看到Modal中數(shù)據(jù)閃爍變成新數(shù)據(jù)，怎么解決這個問題。
還有剛進(jìn)入頁面時在DidMount中調(diào)接口數(shù)據(jù)，頁面的數(shù)據(jù)顯示總是慢其他UI一步

回答
編輯回答
撿肥皂

1.第一個問題，首先你點擊了更多，這個時候modal里面的數(shù)據(jù)已經(jīng)有了，再點擊另外一個的時候，上一個modal里面的有上一個數(shù)據(jù)，新的數(shù)據(jù)進(jìn)來把上一個數(shù)據(jù)替換，就回產(chǎn)生你這樣的效果，
---可以在關(guān)閉modal的時候，清空modal里面的數(shù)據(jù)，就不會產(chǎn)生這樣的效果

  1. DidMount是等組件掛載完成后調(diào)接口進(jìn)行的渲染，而這個接口是異步的，需要時間在進(jìn)行setState操作，而頁面中原本的靜態(tài)數(shù)據(jù)不需要這樣操作，所以在生命周期的數(shù)據(jù)渲染肯定會慢一些

----希望能幫助到你，純手打

2017年6月27日 17:45
編輯回答
念初

數(shù)據(jù)閃爍的話，在點擊之后數(shù)據(jù)渲染，再去這個完了再去彈出modal（setState的第二個參數(shù)去執(zhí)行彈出動作）。或者加一個正在加載的loading style

“DidMount中調(diào)接口數(shù)據(jù)，頁面的數(shù)據(jù)顯示總是慢其他UI一步”：
可以看看為啥比其他數(shù)據(jù)慢，是不是因為數(shù)據(jù)量比其他接口返回的大。嘗試后端去優(yōu)化。
前端處理的話一般這種列表都會去加載一個菊花loading等數(shù)據(jù)出來再去渲染頁面。

當(dāng)然也可以放在willmount。不過體驗不好。

2018年1月6日 18:03