자바 스크립트의 불변성 이해

JavaScript에서 불변의 개념은 가변 재 할당과 혼동 될 수 있습니다. let 또는 var 사용하여 선언 된 변수는 재 할당 할 수 있지만 const 가 선언 한 변수는 할 수 없습니다.

예를 들어, "Kingsley"를 firstName 이라는 변수에 할당합니다.

 FirstName = "Kingsley"를하자;

재 할당 할 수 있습니다.

 FirstName = "John";

let 사용되기 때문입니다. const 사용하는 경우 :

 const lastname = "silas";

재 할당하려고 시도하면 오류가 발생합니다.

 lastname = "doe";
// TypeError : 상수 변수에 대한 할당.

그러나 이것은 불변성이 아닙니다 .

React와 같은 프레임 워크에서 중요한 개념은 상태와 속성 (소품)의 직접적인 수정을 피하는 것입니다. 불변은 독특한 반응의 개념이 아니라 국가와 속성을 다룰 때 반응이 사용하는 중요한 원칙입니다.

그렇다면 불변은 무엇을 의미합니까?

불변 : 사실을 고수하십시오

변경되지 않은 데이터는 구조 나 그 안에있는 데이터를 변경할 수 없습니다. 그것은 변경할 수없는 변수에 가치를 할당하여 공주가 개구리에 키스하고 잘 생긴 왕자가되기를 원합니다. 불변은 개구리가 항상 개구리가 될 것임을 의미합니다.

물체와 어레이는 돌연변이를 허용하지만 이는 데이터 구조를 변경할 수 있음을 의미합니다. 우리가 그것을 말하면,이 개구리들에게 키스하면 왕자로 변신하는 변화로 이어질 수 있습니다.

예를 들어, 사용자 개체 :

 user = {이름 : "James Doe", 위치 : "라고스"};

새로운 newUser 객체 만들기 :

 NewUser = User;

첫 번째 사용자가 위치를 변경하면 user 객체를 직접 수정하고 newUser 영향을 미칩니다.

 user.location = "Abia";
Console.log (newuser.location); // "아비아"

이것이 우리가 원하는 결과가 아닐 수도 있습니다. 이 재 할당은 의도하지 않은 결과를 초래할 수 있습니다.

변하지 않은 객체를 사용하십시오

물체가 돌연변이되지 않도록해야합니다. 메소드를 사용하려면 새 개체를 반환해야합니다. 본질적으로 순수한 기능이 필요합니다.

순수한 기능에는 두 가지 특성이 있습니다.

1. 반환 값은 들어오는 매개 변수에 따라 다릅니다. 입력이 변경되지 않은 한 리턴 값은 변경되지 않습니다.
2. 그것은 그 범위를 벗어난 것을 바꾸지 않습니다.

Object.assign() 사용하여 들어오는 객체를 수정하지 않는 함수를 만들 수 있습니다. 새 개체를 생성하고 두 번째 및 세 번째 매개 변수를 첫 번째 매개 변수로 전달한 빈 개체에 복사 한 다음 새 개체를 반환합니다.

 const updatelocation = (data, newlocation) => {
  return object.assign ({}, data, {location : newlocation});
};

updateLocation() 은 순수한 함수입니다. 첫 번째 사용자 객체를 전달하면 location 속성이 새 값을 갖는 새 사용자 객체를 반환합니다.

또 다른 방법은 확장 연산자를 사용하는 것입니다.

 const updatelocation = (data, newlocation) => {
  반환 {... 데이터, 위치 : newlocation};
};

그렇다면 이것이 React와 어떤 관련이 있습니까?

반응에서 불변

일반적인 React 응용 프로그램에서 상태는 대상입니다. (Redux는 불변 객체를 응용 프로그램 저장소의 기초로 사용합니다.) React의 조정 프로세스는 구성 요소를 다시 렌더링 해야하는지 또는 변경 사항을 추적하는 방법이 필요한지 여부를 결정합니다.

다시 말해, RECT가 구성 요소의 상태가 변경되었다고 판단 할 수 없다면 가상 DOM을 업데이트하는 것은 알 수 없습니다.

불변의 시행으로 인해 이러한 변경 사항을 추적 할 수 있습니다. 이를 통해 React는 객체의 기존 상태와 새로운 상태를 비교하고 해당 차이에 따라 구성 요소를 다시 렌더링 할 수 있습니다.

그렇기 때문에 일반적으로 React의 상태를 직접 업데이트하는 것이 권장되지 않는 이유입니다.

 this.state.username = "Jamesdoe";

국가가 변경되었고 구성 요소를 다시 말할 수 없는지 확실하지 않습니다.

Emutable.js

Redux는 불변의 원리를 따릅니다. 감속기는 순수한 기능이어야하므로 현재 상태를 수정하지 않아야하지만 현재 상태와 동작에 따라 새 객체를 반환해야합니다. 우리는 일반적으로 이전과 같은 연장 연산자를 사용하지만 Empable.js라는 라이브러리를 사용하여 동일한 효과를 달성 할 수 있습니다.

순수한 JavaScript는 불변을 처리 할 수 ​​있지만 그 과정에 약간의 함정이있을 수 있습니다. Empilable.js를 사용하여 우수한 성능을 가진 풍부한 API를 제공하면서 불변을 보장하십시오 . 이 기사는 불변성에 대한 모든 세부 사항에 대한 자세한 내용을 보지 못하지만 REACT 및 REDUX가 구동하는 작업 애플리케이션에서 사용하는 방법을 보여주는 간단한 예를 살펴볼 것입니다.

먼저 필요한 모듈을 가져 와서 TODO 구성 요소를 설정하여 시작하겠습니다.

 const {list, map} = 불변;
const {provider, connect} = ReactRedux;
const {createstore} = redux;

로컬 컴퓨터에서 작동하는 경우 다음과 같은 패키지를 설치해야합니다.

 NPM 설치 Redux React-Redux Emutable

가져 오기 명령문은 다음과 같습니다.

 "불변"에서 {list, map} 가져 오기;
"React-Redux"에서 가져 오기 {provider, connect};
"redux"에서 {createstore} 가져 오기;

그런 다음 일부 태그로 TODO 구성 요소를 설정할 수 있습니다.

 // ... todo 구성 요소 코드 ...

handleSubmit() 메소드를 사용하여 새로운 할 일 항목을 만듭니다. 이 경우 사용자는 새로운 할 일 항목 만 생성하므로 한 가지 조치 만 필요합니다.

 // ... 액션 코드 ...

우리가 만든 페이로드에는 할 일 항목의 ID와 텍스트가 포함되어 있습니다. 그런 다음 감속기 기능을 설정하고 위에서 만든 작업을 감속기 기능으로 전달할 수 있습니다.

 // ... 감속기 코드 ...

connect 사용하여 컨테이너 구성 요소를 작성하여 스토리지에 연결할 수 있습니다. 그런 다음 mapStateToProps() 및 mapDispatchToProps() 함수를 연결하여 연결해야합니다.

 // ... 코드 연결 ...

mapStateToProps() 사용하여 구성 요소에 대한 저장된 데이터를 제공합니다. 그런 다음 mapDispatchToProps() 사용하여 작업 제작자가 구성 요소에 속성으로 사용할 수 있도록합니다.

Reducer Function에서는 Empable.js의 List 사용하여 응용 프로그램의 초기 상태를 만듭니다.

 // ... 감속기 코드 ...

List 을 JavaScript 배열로 생각하므로 state 에서 .push() 메소드를 사용할 수 있습니다. 상태를 업데이트하는 데 사용되는 값은 객체이며, Map 객체로 인식 될 수 있음을 나타냅니다. 이런 식으로 현재 상태가 변경되지 않도록 Object.assign() 또는 Extension 연산자를 사용할 필요가 없습니다. 이것은 특히 주가 깊게 중첩 될 때 훨씬 더 간결하게 보입니다. 우리는 모든 곳에서 확장 연산자를 사용할 필요가 없습니다.

변경되지 않은 상태는 코드가 변경이 발생했는지 신속하게 결정할 수 있도록합니다. 변경 사항이 있는지 확인하기 위해 데이터를 재귀 적으로 비교할 필요가 없습니다. 즉, 큰 데이터 구조를 다룰 때 성능 문제가 발생할 수 있다는 점을 언급하는 것이 중요합니다. 대형 데이터 객체를 복사 할 수있는 가격이 있습니다.

그러나 동적 사이트 나 응용 프로그램이 필요하지 않기 때문에 데이터를 변경해야합니다. 중요한 것은 데이터를 변경하는 방법 입니다. 불변은 응용 프로그램 데이터 (또는 상태)를 변경하는 올바른 방법을 제공합니다. 이로 인해 상태의 변경 사항을 추적하고 해당 변경으로 인해 응용 프로그램의 어떤 부분을 다시 렌더링 해야하는지 결정할 수 있습니다.

불변성을 처음으로 배우는 것은 혼란 스러울 수 있습니다. 그러나 상태가 돌연변이되면 오류가 발생하여 더 나은 오류가 발생합니다. 이것은 일반적으로 불변의 요구와 이점을 이해하는 가장 분명한 방법입니다.

추가 독서

• React 및 Redux의 불변
• Emutable.js 101 -지도 및 목록
• Redux와 함께 Empable.js 사용

원본 텍스트에는 많은 수의 코드 블록이 포함되어 있으므로 의사 원리를 유지하고 과도한 반복을 피하기 위해 일부 코드 블록에 대한 설명을 단순화하고 동의어와 문장을 일부 진술과 단순화했습니다. 이미지 형식은 동일하게 유지됩니다.

위 내용은 자바 스크립트의 불변성 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!