短時間內多個請求狀態更新，導致react 不能及時響應問題總結

個人總結

這段時間項目中遇到這樣一個問題，舊項目中增加了一個聊天對話的模塊，這是其他同學負責的部分，因為要有消息提醒，所以做了個輪詢。消息提示因為是頁頭部分，所以每個模塊都會引用到。這是背景。

現象

我負責的詳情頁部分，因為內容比較多，所以會有3個請求發出，修改的數據內容也比較多，來改變state以改變視圖。
本次也只是加了點東西而已，原本是可以正常顯示。
本地mock時也沒什么問題，發布至測試環境發現數據不能得到渲染。 呈現出來就是頁面一片空白。

調試過程

初步判斷可能是代碼邏輯問題，因為該頁面涉及到新建，編輯，不同類型的不同展示情況，同時有編輯之后的預覽。所以邏輯比較多

renderCont(type,post,isReview) {
        let cont = null
        //未獲得返回，不渲染 
        if(!contentType){
            return cont
        }   
        //條件一 
        if(contentType == 1){
            //更多省略
            cont = <div>{str && this.getContent(str)}</div>
            return cont
        }
        // 條件二
        if(type ==1){
            let coverImageUrl = post.get('coverImageUrl')
            //。。。
            return cont
        }
        //條件三四
        return  (isReview ? <div>1</div>:<div>2</div>)
         
    }

斷點跟進去之后發現，只走了第一個，默認無數據時的null，后面數據不再變化。排除數據異常的可能性之后。
猜測是短時間數據變動太多，導致react沒有及時響應，因為pc是單頁應用，頁頭部分的更新也在改變數據。
可以看一下我們五秒內的網絡請求：

本地響應比較及時，沒什么大的影響。測試環境上就發現斷點進入到react判斷是否更新的方法時，可以發現

• props 里element已經是填充了數據的dom對象，而更新判斷認為沒有改變。這個原因只能去猜測是同時更新太多狀態沒有得到及時響應。

具體原因,這里先占個坑，研究一下react更新機制再說

具體解決，也沒什么好辦法，既然同時更新導致，那就進行函數截流，
即輪詢請求成功之后，使用setTimeout延時更新數據，這樣是可以接受的，消息提示晚一點渲染也是沒影響的。