React--運算元組引起 state 狀態變更未重新渲染解決方案

今天在編寫react元件的工作中遇到了問題：
在state狀態中存在這樣一個陣列arr，arr結構類似[{"src":".......","img":"......"}] 其中src是MP4格式的視訊地址，img是視訊的封面，主要需要完成的功能是對這樣的陣列進行排序和刪除；然而在頁面上操作排序的時候圖片位置變換，而視訊位置未動；state狀態資料已變更
該問題解決過程記錄：

1. 在編寫react的過程中，習慣了setState()的即時渲染，如setState({foo:1})的寫法。setState方法是非同步的，當管理大量元件等情況時可能會導致頁面渲染結束了，而state狀態還未同步完成。

2. setState()方法可以傳遞第二個引數作為回撥，回撥中可以呼叫第一個引數中已經設定好的狀態值如：

    this.state={foo:1};
   
    this.setState({foo:2},()=>{
   
       console.log(this.state.foo);//2
   
   });

   3.所以我將arr的值給一個變數arr1；再清空state狀態的arr；在回撥中操作arr1最後給state狀態的arr陣列保證頁面能完成渲染

總結：
即時渲染在處理簡單的資料結構時能夠立即完成類頁面同步渲染，然而當複雜的資料或者需要載入較大較多瀏覽器元件（如視訊播放）時建議使用回撥函式來確保頁面同步渲染

（以上都是自己的個人看法，不一定正確，歡迎指正）