불변 데이터란
불변 데이터란 한번 생성되면 변경할 수 없는 데이터를 말합니다.
불변 데이터를 사용하면 캐싱, 롤백, 데이터 변경 감지 등의 문제를 더 쉽게 처리할 수 있어 개발이 단순화됩니다.
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는 상위 수준 위의 부분만 복제하고 나머지 부분은 변경하지 않으므로 모든 사람이 동일한 부분을 공유할 수 있으므로 성능이 크게 향상될 수 있습니다.
React.js에서 Immutable Data를 사용해야 하는 이유
완벽해 보이지만 문제가 있습니다. 상태가 업데이트될 때 데이터가 변경되지 않은 경우 가상 돔의 diff도 수행하므로 낭비가 발생합니다. 이런 상황은 실제로 매우 흔한 일입니다. 물론
PureRenderMixin을 사용하여 해결할 수 있다고 말할 수도 있습니다. PureRenderMixin을 사용하면 위의 문제 중 일부를 해결할 수 있지만 주의를 기울이면 찾을 수 있습니다. 아래의 팁을 참조하세요.
해결책은 immutable.js를 사용하여 이 문제를 해결하는 것입니다. 상태가 업데이트될 때마다 데이터 변경이 있는 한 PureRenderMixin은 데이터 변경을 즉시 확인할 수 있어 성능을 크게 향상시킬 수 있습니다. 이 부분에 대한 공식 문서 요약: PureRenderMixin + immutable.js 사용
참고자료