原因：元件key值的設定不規範導致。
解決辦法：給資料項設定唯一的id。使用id給元件設定key值，而不要使用，隨機的，或者按順序設定key值。
問題情況：
,,,
...]
}/** 渲染元件
* data 當期資料
* i 當期下標
* delete 刪除選框開啟
* setdelete 設定刪除函式
*/that.state.data.map(function(data,i)
data=
delete =
setdelete =
/>
})//批量刪除
delete : function());
i--;
}}
導致在運算元組後，渲染混亂。
//使用id,得到預期結果
key =
首先，react渲染時，並不是將所有元件都重新渲染一邊。
其次，react渲染時，有一定的優化機制。
react在渲染下乙個狀態時，先生成一棵虛擬的dom樹，和當前的狀態的dom樹進行對比，更新不一致的地方。
在渲染的時候，非常重要的乙個屬性就是key值，react通過比較key值相同的節點，來判斷其前後狀態的一致性，以及是否需要更新。
在我遇到的問題中，我就是因為按照順序 設定key值。所以如果刪除。在設定key值得時候，仍然會按順序設定key值，0,1,2,3…
react在比較時，雖然被刪除了，但是內部的資料並沒有改變。所以當key值沒有變化時。react認為沒有變化。則不會對其進行更新，反而由於，陣列的長度變化，導致data.map()渲染時，會總是拋棄最後乙個資料項。（個人理解，有不對的地方，希望大家指正。）
所以在設定key值得時候，盡量設定有意義的id，能跟隨資料狀態變化而變化的值。來避免出現意料不到的錯誤。
React 元件更新優化
3.react.memo 4.usememo shouldcomponentupdate和react.purecomponent是類元件中的優化方式，而react.memo是函式元件中的優化方式。class componentdiffpure extends purecomponent change...
react純函式元件useState更新頁面不重新整理
const textlist,settextlist usestate 原陣列 settextlist 新陣列 當修改原陣列時，如果原陣列是個深層陣列 不只一層 使用settextlist修改時，不會觸發頁面重新整理 這個涉及到可變物件he不可變物件的知識，在vue和react中，如果更新可變物件時...
React 入門 2 狀態 UI更新 類元件
ui無非就是應用程式的狀態的一種表現形式.我們已經了解reactdom.render 函式可以掛載或區域性更新dom,但是我們需要一種更精妙的方式.每當應用程式狀態有任何更新,我們就重新整理一次根節點,這樣是可以的,畢竟react只會更新變化的節點,但是整個樹節點都進行一次比對是冗餘的.我們來看這種...