불변의 데이터는 무엇입니까?
불변의 데이터는 생성되면 변경할 수없는 데이터를 말합니다.
불변의 데이터를 사용함으로써 캐싱, 폴백, 데이터 변경 감지 및 기타 문제를 쉽게 처리하고 개발을 단순화 할 수 있습니다.
JS의 불변 데이터
JavaScript에서는 Deep Clone을 통해 불변의 데이터를 시뮬레이션 할 수 있습니다. 즉, 데이터에서 작동 할 때마다 Deep Clones를 사용하여 새 데이터를 생성합니다.
깊은 클론
/** * Learning-Immutable-Clone-Deep.js * 15/6/6에 MDS에 의해 생성되었습니다. */'엄격한 사용'; var clonedeep = require ( 'lodash.clonedeep'); var data = {id : 'data', author : {name : 'mdemo', github : 'https://github.com/demohi'}}; var data1 = clonedeep (data); console.log ( 'equal1 === data); //falsedata1.id = 'data1'; data1.author.name = 'demohi'; console.log (data.id); // data console.log (data1.id); // data1console.log (data.author.name); // mdemo console.log (data1.author.name); // demohi물론 당신은 이것이 매우 느리다는 것을 깨달을 수 있습니다. 아래와 같이, 실제로는 매우 느립니다
Empable.js는 Facebook에서 오픈 소스입니다. 주로 JavaScript 불변 데이터의 문제를 해결하는 것입니다. 해시지도 시도와 벡터 트립을 참조하여보다 효율적인 방법을 제공합니다.
간단히 말해서, Emutable.js는 구조 공유를 통해 성능 문제를 해결합니다. 먼저 비디오를보고 Emutable.js가 어떻게 수행되는지 확인합시다.
정해진 작업이 발생하면 Empable.js는 부모 수준 이상의 부품 만 복제하고 다른 부분은 변경되지 않은 상태로 유지되므로 모든 사람이 동일한 부품을 공유하여 성능을 크게 향상시킬 수 있습니다.
React.js에 익숙한 사람은 React.js가 UI = F (상태)의 프레임 워크라는 것을 알아야합니다. 업데이트 문제를 해결하기 위해 React.js는 Virtual Dom을 사용합니다. Virtual DOM은 Diff를 사용하여 DOM을 수정하여 효율적인 DOM 업데이트를 달성합니다.
완벽하게 들리지만 한 가지 문제가 있습니다. 상태가 업데이트되면 데이터가 변경되지 않으면 가상 DOM Diff를 수행하여 폐기물을 유발할 수 있습니다. 이 상황은 실제로 매우 일반적입니다. Flummox 기사를 참조하십시오.
물론 당신은 당신이 그것을 해결하기 위해 Purerendermixin을 사용 할 수 있다고 말할 수 있습니다. Purerendermixin은 좋은 일입니다. 위의 문제 중 일부를 해결하는 데 사용할 수 있지만주의를 기울이면 문서에서 다음 프롬프트를 볼 수 있습니다.
코드 사본은 다음과 같습니다.
이것은 객체를 얕게 비교합니다. 이들에 복잡한 데이터 구조가 포함 된 경우 더 깊은 차이를 위해 허위성을 생성 할 수 있습니다. 간단한 소품과 상태를 가진 구성 요소에만 혼합하거나 심층 데이터 구조가 변경되었음을 알 때 ForceUpdate ()를 사용하십시오. 또는 불변의 물체를 사용하여 중첩 된 데이터를 빠르게 비교할 수 있습니다.
Purerendermixin은 단순한 얕은 비교 일뿐 아니라 다층 비교에 사용되지 않습니다. 어떻게해야하나요? ? 복잡한 비교를한다면 성능은 매우 열악합니다.
해결책은이 문제를 해결하기 위해 Empable.js를 사용하는 것입니다. 각 상태 업데이트에 데이터 변경이있는 한, PurerenderMixin은 즉시 데이터 변경을 결정하여 성능을 크게 향상시킬 수 있습니다. 이 부분은 공식 문서 불변성 조력자에서도 찾을 수 있습니다.
요약 : Purerendermixin + Empable.js를 사용하십시오
React.js Conf 2015- 불변의 데이터 및 반응
불변성 도우미
순수 렌더 믹신
불변 -JS