項(xiàng)目地址：kolodny/immutability-helper

輪子作用：以最低的成本對(duì)抗淺比較。

適用場(chǎng)景：state的修改。

如果使用redux管理數(shù)據(jù)流，就必然會(huì)遇到state的修改。state修改有個(gè)特性，redux會(huì)進(jìn)行一次新舊state的淺比較，如果有變動(dòng)才會(huì)觸發(fā)重新渲染。一個(gè)大的項(xiàng)目state的數(shù)據(jù)結(jié)構(gòu)必然會(huì)很復(fù)雜，如果有一個(gè)很里層的數(shù)據(jù)被修改，這時(shí)就很頭疼。

如果把state深拷貝一次會(huì)十分浪費(fèi)資源，所以我們不會(huì)這么干。淺拷貝同樣行不通，因?yàn)闇\拷貝之后的操作會(huì)改變舊的state值，這既不規(guī)范，也不會(huì)觸發(fā)渲染。

假如我們有如下一個(gè)state：

state = {info: {name: "tom",age: 12},score: {exam1: [99, 98, 89],exam2: [78, 85]} } 復(fù)制代碼

進(jìn)行一次淺拷貝copyState = state，此時(shí)的copyState與state其實(shí)保存了相同的值，他們指向內(nèi)存中的同一片區(qū)域。如果現(xiàn)在我進(jìn)行一番操作：

state.score.exam2.push(90); 復(fù)制代碼

對(duì)于copyState與state而言，他們其實(shí)沒(méi)有任何變化，依舊指向同一片內(nèi)存區(qū)域，只是這片區(qū)域內(nèi)保存的數(shù)據(jù)有了變化，所以此時(shí)兩者仍然相等。

所以淺復(fù)制自然也就無(wú)法對(duì)抗淺比較，而且還可能出現(xiàn)意想不到的副作用（修改state導(dǎo)致copyState也變了）。

一個(gè)比較原始地方法就是把state照抄一遍，并進(jìn)行所需的修改：

newState = {info: state.info,score: {exam1: state.score.exam1,exam2: [state.score.exam2[0], state.score.exam2[1], 90],}, } 復(fù)制代碼

這就是最大程度上利用原有數(shù)據(jù)，在不深拷貝的情況下定向修改數(shù)據(jù)，并且返回一個(gè)新對(duì)象的操作。

但是上面的操作明顯就很笨拙，在ES6引入了...操作符以后，這個(gè)操作就可以得到簡(jiǎn)化：

newState = {...state,score: {...state.score,exam2: [...state.score.exam2, 90，]，}， } 復(fù)制代碼

但是可以想象，在數(shù)據(jù)層級(jí)比較深的時(shí)候就會(huì)寫(xiě)得很復(fù)雜，上面的...state.score.exam2已經(jīng)是不短的一串代碼了。

面對(duì)著這種困境，immutability-helper就是一個(gè)與使用...操作邏輯相同，但是書(shū)寫(xiě)要簡(jiǎn)便很多的輪子。這個(gè)輪子有一定的學(xué)習(xí)成本。上面的例子使用immutability-helper實(shí)現(xiàn)的具體操作如下：

import update from 'immutability-helper';newState = update(state, {score: {exam2: {$push: [90]}} }) 復(fù)制代碼

不難看出，用了immutability-helper以后少寫(xiě)了很多不必要的代碼，immutability-helper實(shí)現(xiàn)的功能還不僅僅只是這些，有興趣可以自行研究一下源碼。它也是一個(gè)被antd推薦使用的輪子。

總而言之，十分推薦在React中使用immutability-helper來(lái)進(jìn)行state的更新，兼具性能與優(yōu)雅。

總結(jié)

以上是生活随笔為你收集整理的React性能优化：immutability-helper的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。