React와 Vue의 diff 알고리즘의 차이점은 무엇입니까?

차이점: 1. 노드 요소 유형은 동일하지만 className이 다른 경우 Vue는 이를 다른 유형의 요소로 간주하여 삭제하고 다시 빌드하지만 React는 동일한 유형의 노드로 간주합니다. 2. 목록 비교의 경우 Vue는 비교 방법을 양쪽 끝에서 가운데로 사용하고, React는 왼쪽에서 오른쪽으로 비교 방법을 사용합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

react와 vue의 diff 알고리즘의 차이점은 무엇입니까

diff 알고리즘에 대해 이야기하기 전에 먼저 가상 DOM을 이해해 보겠습니다.

가상 DOM은 실제 DOM 노드의 일부 기본 속성과 계층 구조만 유지합니다. 노드 간의 관계는 자바스크립트와 DOM 사이의 "캐싱" 계층과 동일합니다.

Virtual DOM은 실제로 DOM을 설명하기 위해 객체를 사용합니다. 두 객체의 전후 차이점을 비교하여 최종적으로 변경된 부분만 다시 렌더링하여 렌더링 효율성을 향상시킵니다.

diff 알고리즘이란 무엇입니까

React는 두 개의 가상 DOM 트리를 동시에 유지해야 합니다. 하나는 현재 DOM 구조를 나타내고, 다른 하나는 React 상태가 변경되어 다시 렌더링될 때 생성됩니다. React는 두 트리의 차이점을 비교하여 DOM 구조를 수정해야 하는지 여부와 수정 방법을 결정합니다.

간단히 말하면 Diff 알고리즘은 가상 DOM에 구현되어 있으며 가상 DOM의 가속기이자 성능을 향상시키는 마법의 무기입니다.

원래 diff 알고리즘

원래 diff 알고리즘은 실제로 순회 루프 비교입니다. 간단히 말해서, 먼저 diff 알고리즘이 무엇인지 이해해야 합니다. 그러면 vue와 React의 diff 알고리즘을 최적화하는 방법을 알 수 있습니다

원래 diff 알고리즘은 두 개의 가상 DOM 트리를 하나씩 비교하는 것이며, 즉, 가상 DOM 트리라면 루트부터 계층적이지 않습니다. 앞으로는 분기의 각 노드를 별도로 꺼내서 새로 생성된 노드와 비교해야 합니다. 이는 표면적으로는 이 diff 알고리즘의 시간 복잡도입니다. , 그것은 (n ^ 2)입니다. 왜냐하면 우리가 그것들을 다른 n과 하나씩 비교한다면 n^2번 후에 비교가 끝나야 하지만 실제로는 그렇지 않기 때문입니다. 비교 후에도 여전히 어떻게 계산해야 합니까? 최적의 노드에 가장 좋은 것을 배치하므로 O(n ^3)입니다. 실제로 알고리즘 관점에서 원래 diff 알고리즘은 먼저 비교한 다음 실제 DOM을 처리해야 하는 필요성을 기능적으로 해결합니다. 우리의 프로세스는 더욱 복잡해지고 서툴러집니다

최적화된 diff 알고리즘

사실 여기서 말씀드리고 싶은 것은 vue와 React의 diff 알고리즘은 둘 다 최적화된 diff 알고리즘이며 동일한 최적화 지점을 가지고 있다는 것입니다. , 동일한 레벨 비교, 교차 레벨 비교 없음

분석 결과 실제 웹 디스플레이에서 형제가 아닌 노드의 움직임이 매우 작다는 것을 알 수 있으므로 형제 비교를 선택했습니다.

형제에 대한 설명 비교는 동일한 레벨의 노드만 비교하는 것입니다. 다른 레이어는 비교되지 않습니다. 다른 레이어의 경우 원본 노드를 삭제하고 업데이트된 새 노드를 삽입하기만 하면 됩니다

인터넷에서 본 그림입니다. 그림을 그리는 데 정말 게으른 부분이 있으면 저에게 연락해 주세요. 간단히 말하면 그림과 같습니다. 앞서 언급한 바와 같이 트리 구조는 계층적이므로 이전 트리 구조와 새 트리 구조를 비교한 후 실제 DOM 작업을 수행하므로 전체 리플로우가 줄어듭니다. 또는 데이터 변경으로 인한 다시 그리기

Vue와 React의 diff 알고리즘

vue와 React의 diff 알고리즘의 차이점은 모두 교차 수준 비교를 무시하고 동일한 수준 비교만 수행합니다. 패치 함수는 vue diff 중에 호출됩니다. 매개변수는 각각 이전 노드와 새 노드를 나타내는 vnode 및 oldVnode입니다.

vue는 노드 요소 유형이 동일하지만 className이 다른 경우 삭제 및 재구축 시 다른 유형의 요소로 간주됩니다.

vue의 목록 비교는 두 요소를 사용합니다. 비교 방법은 끝에서 중간으로, React는 왼쪽에서 오른쪽으로 비교 방법을 사용합니다. 컬렉션이 마지막 노드만 첫 번째 노드로 이동하는 경우, React는 이전 노드를 순서대로 이동하고, vue는 마지막 노드만 첫 번째 노드로 이동합니다. 일반적으로 vue의 비교 방법이 더 효율적입니다.

추천 학습: "react 비디오 튜토리얼"

위 내용은 React와 Vue의 diff 알고리즘의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!