React中為什麼要使用immutableJs

2021-10-01 15:04:27 字數 1280 閱讀 4634

當父元件讀取子元件資料form,賦值給obj,然後對obj進行一些修改過程中,直接賦值就是淺拷貝,修改obj之後會影響form物件,也就會影響子元件中的form的值,這也就是js中的隱患,在react中向上層元件或者下層元件傳遞物件,很難保證這個物件是否會被修改,當不希望對form產生影響的時候,需要手動深拷貝比較麻煩且浪費空間,

immutablejs

immutablejs裡面的set或者delete更改某個值之後將會返回乙個新的物件,部分資料共享。並且深拷貝物件的時候也不需要把物件裡面的值全部複製一遍。每次更改都會生成乙個新的物件,不會去影響原物件的值。

react中父元件的re-render往往會導致子元件的重渲染,這樣就會產生許多不必要的渲染,可以在子元件中用purecomponent來進行判斷,purecomponent就是自動填充了shouldcomponent的判斷函式,只判斷第一層結構的。

例如父元件有這樣的資料結構,傳遞給子元件

data :

那麼在子元件中判斷的時候,只會判斷直接引數

props.num ===nextprops.num
當資料結構比較複雜的時候

data :

,}

那麼在子元件的判斷就如下

props.nums ===nextprops.nums
這時候即使改變了nums.num1,改變了物件裡面的值,但是物件本身位址沒有發生改變,因此以上判斷就不會造成重新渲染,導致資料錯誤以上就是purecomponent的弊端。這對這個問題我們一般採用如下方式。

重新拷貝乙個nums到乙個新的物件(deepcopy),再去改變這個新的物件的num1的值,這時候在setstate這個深拷貝之後的物件,兩個物件是兩個完全不一樣的物件因此子元件會重新渲染。

在採用深拷貝之後,或者使用redux的reduce之後還會有乙個問題,就是當物件內部的值沒有發生變化的時候,每次setstate重新生成乙個物件,子元件也會進行重新渲染,這時候需要在shoulcomponent中進行深比較,比較物件中每乙個屬性,甚至巢狀屬性的值有沒有發生變化。在選擇是不是進行重新渲染。

immutablejs

immutable 內部使用了 trie 資料結構來儲存,只要兩個物件的 hashcode 相等,值就是一樣的。這樣的演算法避免了深度遍歷比較,效能非常好。immutable.js提供了簡潔高效的判斷資料是否變化的方法,只需 ===(比較的是記憶體位址,值相同但是比較的結果可能不同) 和 is比較就能知道是否需要執行render()

C 中為什麼要使用斷言

斷言assert是僅在debug下有效的巨集,當其中的條件為假時,觸發錯誤提示。使用斷言的目的是捕捉不應該發生的非法情況。注意 不要混淆非法情況與錯誤情況之間的區別,後者的出現是因為 錯誤,是一定要作出處理的。如何使用 1 在函式的入口處,使用斷言檢查引數的有效性 合法性 2 在編寫函式時,要進行反...

為什麼要使用blog

有哥們問我,你為什麼使用blog?我總結了一下,覺得有如下幾個原因。1對自己的督促 有了blog,就會經常記得寫點東西 就會經常翻翻網上的新文章,了解一下新技術,不至於迷失在忙碌的生活中 如果把自己的所感所想所學寫出了,自己對自己也會有個概念,不至於迷迷糊糊 還有,畢竟是掛在網上的文字,心中難免擔心...

為什麼要使用XML

xml 代表擴充套件標記語言 extensible markup language 是由 world wide web consortium w 3c 的 xml工作組定義的。這個工作組是這樣描述該語言的 擴充套件標記語言 xml 是 sgml 的子集,其目標是允許普通的 sgml 在web 上以目...