React重新渲染UI時遇到的坑

react在render重新渲染ui時會與原先渲染時的虛擬dom比較差異，然後只重新渲染差異部分以提高效能  *注意是虛擬dom，這會導致通過js對實體dom的操作，react是無法識別的。

舉個例子：

import react, from "react";

import './index.css';
class formtable extends component,,,
,]};}
createtable()=this.state;
let dragtarget;
//陣列位置交換
const swaparr = (arr, index1, index2)=> 
const handledragstart=(e)=> 
const handledragover=(e)=>
else}} 
const handledragend=(b)=>
const rows = this.state.table.map((p,index)=>
});return  
序號欄位1欄位2
欄位3欄位4
}render()
}export default formtable;

總之第一次拖拽是沒有問題的。

然後在handledragend方法下面新增下面**：

const handledragend=(b)=>);

table = swaparr(table,0,4);
this.setstate();
}

這個時候我們看console：

在render方法裡列印出來的新的**資料的順序是這樣的，那為什麼重新渲染出來的**是這樣的呢，這裡重新渲染ui的時候，虛擬dom的改變有兩處，底部增加了一條記錄，第一行裡td的innerhtml改變了，但是react並不知道實體dom中第一行和第二行的順序已經替換了這件事，因此只是在原有的實體dom上重新渲染了虛擬dom的變化。

React 避免重新渲染 效能優化

react框架執行的原理 介面受到資料驅動，state 和 props 的改動會造成介面的改動。其中，state 是自身的屬性，props 是父元件提供的引數。如果介面內容很多，很小的資料變化會造成介面的重繪，那麼造成效能的浪費。下面從幾個方面總結一下如何避免重新渲染。state是乙個元件內部的屬性...

React中利用 key 實現元件重新渲染

最近在專案實踐中，發現react中可以利用key實現子元件的重新渲染，具體場景 需要切換下拉列表時，對應的榜單也要替換成該輪的資料 如下 render this state round表示選中的選單的索引 return record wrap selectedindex showmenu oncha...

React怎麼判斷什麼時候該重新渲染元件？

react因為他的效能而著名。因為他有乙個虛擬dom層並且只有在需要時才更新真實dom。即使是同樣地資訊這也比一直直接更新dom要快很多。但是，react的智慧型僅此而已 目前為止 我們的任務是知道react的預期行為以及限制，這樣我們才不會意外損失效能。我們需要關注的一方面是react如何決定什麼...