React Redux常見問題總結

react 使用diff演算法，使用key來做同級比對。如果使用陣列下標作為key，有以下情況：

在陣列頭部或中部插入或刪除元素：所有key對應的節點的值發生更改，進行重新渲染。造成效能損耗

而如果使用陣列中唯一值來作為key：不管是在何處插入或刪除節點，其他key對應的節點的值未發生更改，只需插入或刪除操作的陣列節點。

使用shouldcomponentupdate()以讓react知道當前狀態或屬性的改變是否不影響元件的輸出，預設返回ture，返回false時不會重寫render，而且該方法並不會在初始化渲染或當使用forceupdate()時被呼叫.

如果在元件樹的根節點發生更新則所有子節點都會發生更新，這時對所有子節點使用shouldcomponentupdate來減少子節點的渲染，無疑會增加很多**。我們可以選擇使用purecomponent來處理。

react.purecomponent 和 react.component

purecomponent 和 component的區別是：component需要手動實現 shouldcomponentupdate，而purecomponent通過淺對比預設實現了shouldcomponentupdate方法

淺比較(shallowequal)，即react原始碼中的乙個函式，然後根據下面的方法進行是不是purecomponent的判斷，幫我們做了本來應該我們在shouldcomponentupdate中做的事情

if (this._compositetype === compositetypes.pureclass)

react.memo

react.memo為高階元件。它與 react.purecomponent 非常相似，但它適用於函式元件，但不適用於 class 元件。

如果你的函式元件在給定相同 props 的情況下渲染相同的結果，那麼你可以通過將其包裝在 react.memo 中呼叫，以此通過記憶元件渲染結果的方式來提高元件的效能表現。這意味著在這種情況下， react 將跳過渲染元件的操作並直接復用最近一次渲染的結果。

react.memo 依然是一種物件的淺比較(預設)，有複雜物件時無法render。在react.memo中可以自定義其比較方法的實現。

function mycomponent(props) 
function areequal(prevprops, nextprops) 
export default react.memo(mycomponent, areequal);

和purecomponent的區別：

總結purecomponent不僅會影響本身，而且會影響子元件，所以purecomponent最佳情況是展示元件

高階元件是引數為元件，返回值為新元件的函式。hoc 是純函式，沒有***。hoc 在 react 的第三方庫中很常見，例如 redux 的 connect

高階元件的作用：

高階元件的實現：

**層面：

**體積優化：

效能檢測工具:

從實現原理上來說，最大的區別是兩點：