在React中處理狀態和對象數組

Question

我們都知道React文檔說直接不會改變this.state。我想我有一個關於狀態陣列和不變性的問題：

如果我有一個狀態保持的對象數組，我應該總是使用immutability helper作爲this question當以任何方式突變該數組？

或者使用[].concat()或[].slice()作爲回答here和here是完全可以接受的嗎？

我再次問這個問題，因爲[].concat()和[].slice()確實返回新數組，但只返回淺拷貝數組。如果我改變了數組的元素，它會改變時的陣列，以及違反國家Reactjs的（我已經看太多FMA：兄弟）：第一條規則

var arr1 = [{ name : "bill" }, { name : "chet" }]; 
var arr2 = arr1.slice(); 

// this changes both arrays 
arr2[0].name = "kevin"; 

// check 
(arr1[0].name === arr2[0].name) // => true; both are "kevin" 
(arr1[0] === arr2[0])   // => true; only shallow copy 

// this changes arr2 only 
arr2.push({ name : "alex" }); 

// check again 
(arr1.length === arr2.length) // => false; 
(arr1[0].name === arr2[0].name) // => still true; 
(arr1[0] === arr2[0])   // => still true; 

據我所知， addon update在覆蓋shouldComponentUpdate時最爲常用，但對於我在做的事情，我不需要重寫該函數;我只需要通過向數組添加新元素（使用concat或slice解決）或通過更改現有元素的屬性（通過使用React.addons.update解決）來更改處於狀態的數組中的對象。

TL; DR

如果不重寫shouldComponentUpdate，何時應使用React.addons.update超過[].slice()或[].concat()突變存儲在狀態對象的數組？

Answer 1

您首先需要考慮邊界。如果你只在擁有它的組件中使用這個數組，並且可以將它作爲道具傳遞下去：這並不重要。你可以用任何方式修改它，除非其他組件有一些嚴重的問題，否則它們永遠不會知道它們的區別，因爲當組件更新它的狀態時它們會得到新的道具。

如果你將這個數組傳遞給某種類型的api，比如流量動作創建者或者作爲道具傳遞給你的函數，那麼你可能會遇到一些非常嚴重且難以追蹤的bug。這是不變性很重要的地方。

例如，在這種情況下，您可能需要檢查回撥中某個人的某些屬性，但是如果可能people[0].name發生了變化，則說明您處於競爭狀態。

function savePeople(people){ 
    $.post('/people/update', people, function(resp){ 
    if (people[0].name === ...) { 
     // ... 
    } 
    }); 
}