React15 버전과 React16 버전의 차이점은 무엇인가요?

차이점: 1. 버전 15의 아키텍처는 코디네이터와 렌더러의 두 부분으로 나뉘며, 버전 16의 아키텍처는 스케줄러, 코디네이터 및 렌더러의 세 부분으로 나뉩니다. 2. 버전 15의 조정자는 재귀적이고 동기적으로 작동합니다. , 16 버전의 조정자는 15 버전의 동기 업데이트 대신 비동기식 중단 가능 업데이트를 사용합니다.

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

react15와 버전 16의 차이점은 무엇입니까

1. React15의 아키텍처는 두 가지 계층으로 나눌 수 있습니다:

Reconciler(코디네이터) - 업데이트해야 하는 구성 요소를 알아보고 업데이트 방법을 식별합니다.

Renderer(Renderer) - 변경된 구성 요소를 페이지에 렌더링하는 역할을 담당합니다.

II. React16의 아키텍처는 세 가지 계층으로 나눌 수 있습니다.

Scheduler(Scheduler) - 작업 예약 우선순위, 높음 우선 순위가 먼저 Reconciler 단계에 들어갑니다.

Reconciler(Coordinator) - 업데이트해야 하는 구성 요소를 찾고 업데이트 방법을 식별합니다.

Renderer(Renderer) - 변경된 구성 요소를 페이지에 렌더링하는 역할을 담당합니다.

앞서 말한 내용은 다음과 같습니다.

브라우저 16.6ms 메커니즘

사람의 눈으로 볼 때 정상적이고 부드러운 새로 고침 빈도는 60hz, 즉 60프레임입니다. 즉, 브라우저는 16.6ms마다 한 번씩 새로 고침됩니다.

우리는 js가 dom 요소를 작동할 수 있다는 것을 알고 있으므로 브라우저의 GUI 스레드와 js 스레드는 상호 배타적입니다. js 실행과 브라우저 그리기 및 레이아웃 작업은 동시에 수행할 수 없습니다. 따라서 브라우저는 16.6ms마다 다음 작업을 수행해야 합니다.

JS 스크립트 실행 ------ 브라우저 스타일 레이아웃 ------ 브라우저 스타일 그리기

js 스크립트 실행 시간이 너무 길면 16.6 ms, 이 새로 고침 중에는 브라우저 그리기 및 레이아웃을 실행할 수 없으므로 육안으로 인식할 수 있는 정지 현상이 발생합니다. 작업 중에 브라우저가 "실시간"으로 응답하지 않는 것으로 나타났습니다. 예를 들어, 사용자가 입력창에 내용을 입력하는 경우 키보드 버튼을 누른 것으로 반영되지만 입력 내용이 페이지에 실시간으로 표시되지는 않습니다.

15와 16

reconciler의 차이점은 stack-reconciler입니다. 즉, 재귀적 형태로 작동하고, 동기식이며, 가상 DOM 트리를 생성하고 비교하는 과정에서 중단될 수 없습니다. 이런 식으로 구성 요소 수준이 너무 깊어지면 js의 실행 시간이 너무 길어지고 브라우저가 레이아웃과 그리기를 할 수 없어 프레임 손실이 발생합니다.

react16의 조정자는 Fiber-reconciler입니다. 즉, React15의 동기식 업데이트 대신 비동기식 중단 가능 업데이트가 사용됩니다. 반응16의 스케줄러는 브라우저가 js 스크립트를 실행할 여유 시간이 있는지 여부를 조정자에게 알려줍니다. 이는 브라우저의 그리기 및 레이아웃 작업에 영향을 미치지 않습니다. 프레임 손실이 없습니다.

react16에서는 원래 가상 DOM의 구조가 더 이상 비동기식 중단 가능 업데이트 요구 사항을 충족할 수 없기 때문에 대신 새로운 구조 Fiber를 사용합니다. 가상 DOM 노드는 Fiber 노드에 해당하고 가상 DOM 트리는 Fiber 트리에 해당합니다.

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

위 내용은 React15 버전과 React16 버전의 차이점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!