처리 상태 및 객체 배열 배열

Question

우리는 모두 React docs가 this.state을 절대로 변경하지 않는다고 말합니다. 상태 배열과 불변성에 대한 느린 질문이 있습니다.

상태로 배열 된 객체 배열이 있다면 어떤 식 으로든 배열을 변형 할 때 항상 과 같이 immutability helper을 사용해야합니까?

[].concat() 또는 [].slice()을 here 및 here으로 완벽하게 사용하실 수 있습니까?

[].concat() 및 [].slice()은 새 배열을 반환하지만 얕은 복사본 배열 만 반환하므로이 질문을 다시 묻습니다. 나는 이해

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; 

: 나는 배열의 요소를 변경하면 Reactjs 국가의 첫 번째 규칙 (: 형제애를 너무 많이 FMA를 지켜 봤는데)를 위반뿐만 아니라 상태에서 배열을 변경합니다 addon update은 shouldComponentUpdate을 무시할 때 가장 일반적으로 사용되지만, 내가하고있는 것에 대해서는 그 함수를 오버라이드 할 필요가 없습니다. 배열에 새 요소를 추가하거나 (concat 또는 slice를 사용하여 해결) 또는 기존 요소의 속성을 변경하여 (React.addons.update를 사용하여 해결됨) 상태에있는 배열의 객체를 변경하면됩니다.

TL;

DR I 상태에 저장된 오브젝트의 배열을 돌연변이 또는 [].slice()[].concat() 위에 React.addons.update 사용해야하면 shouldComponentUpdate을 무시하지 않으면?

Answer 1

주로 경계를 고려해야합니다. 이 배열을 소유하고있는 구성 요소에서만이 배열을 사용하고 선택적으로 배열을 소품으로 전달하면 중요하지 않습니다. 어떤 방식 으로든 수정할 수 있으며, 다른 구성 요소에 심각한 문제가 없으면 구성 요소가 상태를 업데이트 할 때 새 소품을 얻게되므로 차이점을 알 수 없습니다.

이 배열을 플럭스 액션 생성자 또는 사용자에게 전달 된 함수와 같은 일종의 API에 전달하면 매우 심각하고 어려운 버그를 추적 할 수 있습니다. 이것은 불변성이 중요한 곳입니다.

예를 들어이 경우 콜백에있는 사람의 속성을 확인하고 싶을 수도 있지만 people[0].name이 변경 될 수있는 경우 경쟁 조건이 있습니다.

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