immutable.js_javascript 기술을 얻기 위한 자세한 지침

불변 데이터란

불변 데이터란 한번 생성되면 변경할 수 없는 데이터를 말합니다.

불변 데이터를 사용하면 캐싱, 롤백, 데이터 변경 감지 등의 문제를 더 쉽게 처리할 수 있어 개발이 단순화됩니다.

js의 불변 데이터
JavaScript에서는 Deep Clone을 통해 Immutable Data를 시뮬레이션할 수 있습니다. 즉, 데이터가 연산될 때마다 새로운 데이터가 Deep Clone됩니다.

딥클론

/**
 * learning-immutable - clone-deep.js
 * Created by mds on 15/6/6.
 */

'use strict'; 
var cloneDeep = require('lodash.clonedeep');

var data = { 
 id: 'data',
 author: {
  name: 'mdemo',
  github: 'https://github.com/demohi'
 }
};

var data1 = cloneDeep(data);

console.log('equal:', data1===data); //false

data1.id = 'data1'; 
data1.author.name = 'demohi';

console.log(data.id);// data 
console.log(data1.id);// data1

console.log(data.author.name);//mdemo 
console.log(data1.author.name);//demohi 

물론 이것이 매우 느리다는 것을 알 수 있습니다. 아래와 같이 실제로는 매우 느립니다

주인공 immutable.js 등장

immutable.js는 해시 맵 시도 및 벡터 시도 보다 효율적인 방법을 제공합니다.

간단히 말하면 immutable.js는 구조적 공유를 통해 성능 문제를 해결합니다. immutable.js가 어떻게 작동하는지 먼저 동영상을 시청해 보세요

설정 작업이 있을 때 immutable.js는 상위 수준 위의 부분만 복제하고 나머지 부분은 변경하지 않으므로 모든 사람이 동일한 부분을 공유할 수 있으므로 성능이 크게 향상될 수 있습니다.

React.js에서 Immutable Data를 사용해야 하는 이유

React.js에 익숙한 사람이라면 React.js가 UI = f(states)인 프레임워크라는 것을 알아야 합니다. React.js는 업데이트 문제를 해결하기 위해 diff를 통해 dom을 수정하여 높은 수준을 달성합니다. 효율성.돔 업데이트.

완벽해 보이지만 문제가 있습니다. 상태가 업데이트될 때 데이터가 변경되지 않은 경우 가상 돔의 diff도 수행하므로 낭비가 발생합니다. 이런 상황은 실제로 매우 흔한 일입니다.

flummox 기사를 참고하세요.

물론

PureRenderMixin을 사용하여 해결할 수 있다고 말할 수도 있습니다. PureRenderMixin을 사용하면 위의 문제 중 일부를 해결할 수 있지만 주의를 기울이면 찾을 수 있습니다. 아래의 팁을 참조하세요.

코드 복사 코드는 다음과 같습니다.

이는 객체를 얕게 비교합니다. 복잡한 데이터 구조가 포함된 경우 더 깊은 차이에 대해 거짓 부정이 발생할 수 있습니다. 단순한 소품과 상태가 있는 구성 요소에만 혼합하거나 심층적인 데이터 구조가 변경되었음을 알 때 forceUpdate()를 사용합니다. , 중첩된 데이터를 빠르게 비교할 수 있도록 불변 객체를 사용하는 것을 고려해 보세요.

PureRenderMixin은 단순한 얕은 비교일 뿐이고 다중 레이어 비교에는 사용되지 않습니다. 무엇을 해야 할까요? ? 복잡한 비교를 직접 수행하면 성능이 매우 저하됩니다.

해결책은 immutable.js를 사용하여 이 문제를 해결하는 것입니다. 상태가 업데이트될 때마다 데이터 변경이 있는 한 PureRenderMixin은 데이터 변경을 즉시 확인할 수 있어 성능을 크게 향상시킬 수 있습니다. 이 부분에 대한 공식 문서

불변성 도우미를 참조할 수도 있습니다.

요약: PureRenderMixin + immutable.js 사용

참고자료

React.js Conf 2015 - 불변 데이터와 React

불변성 도우미

PureRenderMixin

불변-js