직접 운영 DOM DOM 일정 시간이 소요되는 가상 운영이보다?
아니면 직접 DOM 조작 DOM 조작은 가상 시간이 소요 그것보다 더 나은해야합니까?
1) 가상 DOM의 특성은 JS 객체이며, 가상 DOM DOM 실제 동작 감소, 수정 된 데이터는 새로운 가상 가상 DOM DOM을 생성하기 위해 수정 될 때
이전 및 새 가상 DOM DOM 패치를 얻기 위해 사랑하는 알고리즘을 사용하여 (즉, 섹션을 수정할 필요),이 패치는 브라우저 충돌
(환원 환류를 재 묘화 성능을 최적화하는 목적을 달성하기 위해)
2) 각각의 조작 또는 DOM 환류 묘화 발생할 실제 DOM의 빈번한 변화)는 다수의 레이아웃을 트리거 상당한 저항 성능 (전체를 묘화 CRUD
A), 가상 DOM
1) DOM의 본질은 무엇인가?
DOM은 개념 브라우저 JS 객체를 사용하여 페이지에 요소를 나타냅니다 및 운영 DOM이 API를 개체를 제공합니다
2) 가상 DOM이 무엇 반작용?
DOM은 실제 DOM을 설명하는 JS 오브젝트와 가상 오브젝트 JS (데이터 + JXS 템플릿)이며
왜 가상 DOM 성능을 향상?
가상 DOM은 역류를 감소, 감소는 즉 DOM, DOM하지만 작업의 수를 조작하는 것을 의미하지 않는다, 성능을 개선하고 다시 그리기
돔 JS 가상 중간에 상당하고 실제 캐시 DOM 첨가는 DIFF 알고리즘 성능을 향상 불필요한 DOM 조작의 사용을 피할 dom으로
1) 자바 스크립트 객체하여 DOM 트리 구조의 구성을 도시 한 도면
2) 그런 다음 문서에 삽입 된 실제 나무, DOM 트리의 구축
3) 상기 상태 변경은 새로운 오브젝트 트리를 재 구축 할 때
4) 두 나무 다음은 새로운 나무와 오래된 나무와 기록, 비교 하였다
5) 녹화 단계 2)에인가 된 두 가지 차이점이 실제 DOM 트리에 구성되고, 업데이트 된보기
사용 DIFF 알고리즘은 이전 및 새 가상 DOM을 비교 ---- 즉, 두 객체 JS 덜 소비 성능 및 가상 DOM 크게 개선 된 성능이 실제 DOM 더 소비 성능의 비교를 비교하는 것입니다
정렬 타이밍 가상 DOM 발생 : 데이터는 가상 DOM 배향 상태의 부모 구성 요소의 변화는 최종 분석 setState를 ()을 상태가 발생할 때 호출하는 (소품 상태 변화 및 변경 소품 발생 바뀌면 변경 한 후 가상 DOM)은 비교를 발생합니다.
setState를 ()는 3- ----- setState를 () 변화 데이터, 소형의 호출 간격의 호출과 성능을 향상 시키도록있어서, 비동기 3와 setState의 setState를 단지 가상 DOM 번 이상 하나로 결합 될 수있다 반응 다음하여 가상 DOM에 비해 두 개의 추가 성능 손실에 대한 필요성을 제거, DOM을 업데이트
통화 setState를 이후에 무슨 일이 ()?
1) 우선, 컴포넌트 객체와 함께 입력 파라미터의 현재의 상태와 setState () 메소드에 반응
2) 다음에, 트리거 템퍼링 공정 (화해)
3) 템퍼링 공정 후, 상대적으로 효율적인 방식 것이다 반응하여 새로운 상태에 기초하여 요소 트리를 구성 반작용
4) 재 렌더링 차이를 최소화 할 수있어서, 인터페이스를 자동 반작용 새로운 노드 나무 및 나무의 차이를 계산하고, 얻어진 반응 요소 트리 후.
계산 알고리즘의 차이는 상대적으로 정확하게 변경하고 변경하는 방법, 즉 주문형 업데이트를 보장하는 전부는 아니지만, 다시 렌더링시킨 위치를 알고 반응한다.
3) 가상 DOM 목적?
효율적인 갱신 페이지 DOM 요소
2 개), DIFF 알고리즘 : 배향 층과 같은, 사용 된 키 값의 다른 목록
- 트리 구조는 계층 적 분해, 비교 요소 만 형제.
- 각 셀 비교를 용이하게하기 위해, 상기 고유 키 속성 목록 구조에 추가된다.
- 유일한 구성 요소의 동일한 클래스와 일치 반응 (클래스가있는 것은 구성 요소의 이름을 참조)
- 각 이벤트 루프의 끝 부분에, 부품 점수 모든 얼룩을 확인할 반응. 얼룩으로 표시하게 반응 시간에있어서의 구성 요소와 setState 전화 동작을 병합하고 칠.
- 선택 성질 나무 렌더링합니다. 개발자는 DIFF 성능 shouldComponentUpdate을 향상 대체 할 수 있습니다
DOM은 동일한 층의 정렬이다 반응
diff算法指的就是两个虚拟DOM作比对，在diff算法中有个概念就是同级比对，首先比对顶层虚拟DOM节点是否一致，如果一样就接着比对下一层，如果不一样，就停止向下比对，将原始页面中这个DOM及 下面的DOM全部删除掉，重新生成新的虚拟DOM，然后替换掉原始页面的DOM
存在问题：如果第一层虚拟DOM节点不同，下面的都同，使用虚拟DOM的diff算法，则这些节点都不能使用了，会造成重新渲染的浪费。
优点：同层虚拟DOM比对，只需要一层层的比较，算法简单，比对的速度快
虽然会造成重新渲染的浪费，但是会大大减少两个虚拟DOM比对的性能消耗
列表中的元素使用不同的key
虚拟DOM中的列表中同级元素的key值要不同，使用diff算法，判断哪些元素是增删改，从而提高性能
列表中key的作用：
1）key是React用于跟踪哪些元素是增加、删除、修改的辅助标记，需要保证在同级元素中key的唯一性
2） React Diff 算法借助元素的 Key 值判断元素是新增、删除、修改，从而减少不必要的元素重渲染。
3）React 还需要借助 Key 值来判断元素与本地状态的关联关系
问题：在循环中key值最好不要用index的原因？
如果key值使用index的话，就可能无法使原始的虚拟DOM中的key值和新的虚拟DOM中的key值一致，从而不能充分发挥diff算法的优势。
比如一个数组里有数据a b c，用index表示的key分别为0 1 2
当删除a时，b c的key分别为0 2，从而导致元素的新旧key值不一样，即key值不稳定，所以key值就失去其存在的意义了
比较合适的key值有：id或者不一样的内容
1）tree diff
新旧两颗DOM树，逐层对比的过程，就是Tree Diff；当整颗DOM树逐层对比完毕，则所有按需更新的元素都能找到
2）component diff
在进行Tree Diff的时候，每一层中，组件级别的对比，叫做Component Diff
如果对比前后，组件类型相同，则暂时认为此组件不需要更新；
如果对比前后，组件类型不同，则需要移除旧组件。创建新组建，并追加到页面上
3）element diff
在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比，这叫做element diff