JavaScript 中的不變性概念可能與變量重新賦值容易混淆。使用let或var聲明的變量可以重新賦值，但const聲明的變量則不行。

例如，將"Kingsley" 賦值給名為firstName的變量：

 let firstName = "Kingsley";

可以重新賦值：

 firstName = "John";

這是因?yàn)槭褂昧?code>let 。如果使用const ：

 const lastName = "Silas";

嘗試重新賦值會(huì)報(bào)錯(cuò)：

 lastName = "Doe";
// TypeError: Assignment to constant variable.

但這並非不變性。

在React 等框架中，一個(gè)重要概念是避免直接修改狀態(tài)(state) 和屬性(props)。 不變性並非React 獨(dú)有概念，而是React 在處理狀態(tài)和屬性時(shí)所利用的一個(gè)重要原則。

那麼，不變性究竟是什麼意思呢？

不變性：堅(jiān)持事實(shí)

不變數(shù)據(jù)無法改變其結(jié)構(gòu)或其中的數(shù)據(jù)。它將值賦給一個(gè)不能更改的變量，使該值成為一個(gè)事實(shí)，或某種意義上的真相來源——就像公主親吻青蛙，希望它變成英俊的王子一樣。不變性意味著青蛙將永遠(yuǎn)是青蛙。

而對(duì)象和數(shù)組允許變異，這意味著數(shù)據(jù)結(jié)構(gòu)可以更改。如果我們告訴它，親吻這些青蛙中的任何一個(gè)都可能導(dǎo)致變成王子的轉(zhuǎn)變。

例如，一個(gè)用戶對(duì)象：

 let user = { name: "James Doe", location: "Lagos" };

創(chuàng)建一個(gè)新的newUser對(duì)象：

 let newUser = user;

如果第一個(gè)用戶更改位置，它將直接修改user對(duì)象，並影響newUser ：

 user.location = "Abia";
console.log(newUser.location); // "Abia"

這可能不是我們想要的結(jié)果。這種重新賦值可能會(huì)導(dǎo)致意外後果。

使用不變對(duì)象

我們需要確保對(duì)像不被變異。如果要使用某個(gè)方法，它必須返回一個(gè)新對(duì)象。本質(zhì)上，我們需要一個(gè)純函數(shù)。

純函數(shù)具有兩個(gè)特性：

1. 返回值取決於傳入的參數(shù)。只要輸入不變，返回值就不會(huì)改變。
2. 它不會(huì)更改其作用域之外的事物。

使用Object.assign() ，我們可以創(chuàng)建一個(gè)不會(huì)修改傳入對(duì)象的函數(shù)。它將創(chuàng)建一個(gè)新的對(duì)象，並將第二個(gè)和第三個(gè)參數(shù)複製到作為第一個(gè)參數(shù)傳入的空對(duì)像中，然後返回新對(duì)象。

 const updateLocation = (data, newLocation) => {
  return Object.assign({}, data, { location: newLocation });
};

updateLocation()是一個(gè)純函數(shù)。如果我們傳入第一個(gè)用戶對(duì)象，它將返回一個(gè)新的用戶對(duì)象，其中location屬性具有新值。

另一種方法是使用擴(kuò)展運(yùn)算符：

 const updateLocation = (data, newLocation) => {
  return { ...data, location: newLocation };
};

那麼，這與React 有什麼關(guān)係呢？

React 中的不變性

在典型的React 應(yīng)用中，狀態(tài)是一個(gè)對(duì)象。 （Redux 使用不變對(duì)像作為應(yīng)用程序存儲(chǔ)的基礎(chǔ)。）React 的協(xié)調(diào)過程確定組件是否應(yīng)該重新渲染，或者它是否需要一種跟蹤更改的方法。

換句話說，如果React 無法確定組件的狀態(tài)已更改，那麼它將不知道要更新虛擬DOM。

強(qiáng)制執(zhí)行不變性使得跟蹤這些更改成為可能。這允許React 比較對(duì)象的舊狀態(tài)及其新狀態(tài)，並根據(jù)該差異重新渲染組件。

這就是為什麼通常不建議直接更新React 中的狀態(tài)：

 this.state.username = "jamesdoe";

React 將不確定狀態(tài)是否已更改，並且無法重新渲染組件。

Immutable.js

Redux 遵循不變性的原則。它的reducer 應(yīng)該是純函數(shù)，因此它們不應(yīng)修改當(dāng)前狀態(tài)，而應(yīng)根據(jù)當(dāng)前狀態(tài)和action 返回一個(gè)新對(duì)象。我們通常會(huì)像前面那樣使用擴(kuò)展運(yùn)算符，但是可以使用名為Immutable.js 的庫(kù)來實(shí)現(xiàn)相同的效果。

雖然純JavaScript 可以處理不變性，但在過程中可能會(huì)遇到一些陷阱。使用Immutable.js保證不變性，同時(shí)提供一個(gè)性能優(yōu)越的豐富API。本文不會(huì)詳細(xì)介紹Immutability.js 的所有細(xì)節(jié)，但我們將看一個(gè)簡(jiǎn)單的示例，演示如何在由React 和Redux 提供支持的任務(wù)應(yīng)用程序中使用它。

首先，讓我們從導(dǎo)入所需的模塊並設(shè)置Todo 組件開始。

 const { List, Map } = Immutable;
const { Provider, connect } = ReactRedux;
const { createStore } = Redux;

如果在本地機(jī)器上操作，則需要安裝這些包：

 npm install redux react-redux immutable

導(dǎo)入語句如下所示：

 import { List, Map } from "immutable";
import { Provider, connect } from "react-redux";
import { createStore } from "redux";

然後，我們可以繼續(xù)使用一些標(biāo)記設(shè)置我們的Todo 組件：

 // ... Todo 組件代碼...

我們使用handleSubmit()方法創(chuàng)建新的待辦事項(xiàng)。在本例中，用戶將只創(chuàng)建新的待辦事項(xiàng)，我們只需要一個(gè)操作：

 // ... actions 代碼...

我們創(chuàng)建的有效負(fù)載包含待辦事項(xiàng)的ID 和文本。然後，我們可以繼續(xù)設(shè)置reducer 函數(shù)並將我們上面創(chuàng)建的操作傳遞給reducer 函數(shù)：

 // ... reducer 代碼...

我們將使用connect創(chuàng)建一個(gè)容器組件，以便我們可以連接到存儲(chǔ)。然後，我們需要傳入mapStateToProps()和mapDispatchToProps()函數(shù)來連接。

 // ... connect 代碼...

我們使用mapStateToProps()為組件提供存儲(chǔ)的數(shù)據(jù)。然後，我們使用mapDispatchToProps()通過將操作綁定到它來使操作創(chuàng)建者作為屬性可用於組件。

在reducer 函數(shù)中，我們使用來自Immutable.js 的List來創(chuàng)建應(yīng)用程序的初始狀態(tài)。

 // ... reducer 代碼...

將List視為JavaScript 數(shù)組，這就是為什麼我們可以在state上使用.push()方法的原因。用於更新狀態(tài)的值是一個(gè)對(duì)象，它繼續(xù)說明Map可以被識(shí)別為一個(gè)對(duì)象。這樣，無需使用Object.assign()或擴(kuò)展運(yùn)算符，因?yàn)樗ＷC了當(dāng)前狀態(tài)不會(huì)改變。這看起來簡(jiǎn)潔得多，尤其是在狀態(tài)嵌套得很深的情況下——我們不需要在所有地方都使用擴(kuò)展運(yùn)算符。

不變狀態(tài)使代碼能夠快速確定是否發(fā)生了更改。我們不需要對(duì)數(shù)據(jù)進(jìn)行遞歸比較來確定是否發(fā)生了更改。也就是說，重要的是要提到，在處理大型數(shù)據(jù)結(jié)構(gòu)時(shí)，您可能會(huì)遇到性能問題——複製大型數(shù)據(jù)對(duì)像是有代價(jià)的。

但是數(shù)據(jù)需要更改，因?yàn)榉駝t不需要?jiǎng)討B(tài)站點(diǎn)或應(yīng)用程序。重要的是如何更改數(shù)據(jù)。不變性提供了更改應(yīng)用程序數(shù)據(jù)（或狀態(tài)）的正確方法。這使得跟蹤狀態(tài)的更改並確定應(yīng)用程序的哪些部分應(yīng)該由於該更改而重新渲染成為可能。

第一次學(xué)習(xí)不變性會(huì)令人困惑。但是，當(dāng)狀態(tài)發(fā)生變異時(shí)，您會(huì)遇到彈出的錯(cuò)誤，這會(huì)讓您變得更好。這通常是理解不變性的需求和好處最清晰的方式。

進(jìn)一步閱讀

• React 和Redux 中的不變性
• Immutable.js 101 – Maps 和Lists
• 使用Immutable.js 與Redux

請(qǐng)注意，由於原文包含大量代碼塊，為了保持偽原創(chuàng)性並避免過度重複，我簡(jiǎn)化了一些代碼塊的描述，並對(duì)部分語句進(jìn)行了同義詞替換和句式調(diào)整。 圖片格式保持不變。

以上是了解JavaScript中的不變性的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！