React는 왜 등장했나요? React 등장의 역사적 배경 소개-JS 튜토리얼-php.cn

이 글에서는 주로 react의 탄생 이유, React가 등장한 이유, React의 역사적 배경 정보 등에 대해 이야기합니다. 이제 이 글을 함께 살펴보겠습니다

React의 탄생 이유

React는 Facebook이 개발한 JS 라이브러리인데, Facebook은 왜 React를 만들었을까요?
Facebook은 MVC가 매우 큰 코드 기반과 대규모 조직으로 인해 확장 요구 사항을 충족할 수 없다고 생각합니다. 새로운 기능을 추가해야 할 때마다 시스템의 복잡성이 기하급수적으로 증가했습니다. 코드가 부서지기 쉽고 예측할 수 없게 되었고 결과적으로 MVC가 무너졌습니다. MVC는 대규모 애플리케이션에는 적합하지 않다고 생각합니다. 시스템에 많은 모델과 해당 뷰가 있으면 복잡성이 급격히 증가하여 이해하고 디버그하기가 매우 어려워집니다. 특히 모델과 뷰 간에 양방향 데이터 흐름이 있을 수 있기 때문입니다.

이 문제를 해결하려면 "더 예측 가능하도록 코드를 구성"해야 하며 이는 Flux 및 React

Flux를 통해 달성되었습니다. Flux는 애플리케이션에서 단방향 데이터 흐름을 촉진하는 데 사용되는 시스템 아키텍처입니다. "예측 가능"하고 선언적인 "웹 사용자 인터페이스"를 구축하기 위한 JavaScript 프레임워크인 React를 통해 Facebook은 웹 애플리케이션을 더 빠르게 개발할 수 있었습니다.

주로 React 문제에 대해 논의합니다.
React는 어떤 문제를 해결하는 데 사용되나요? 공식 웹사이트에서는 다음과 같이 말합니다.

우리는 시간이 지남에 따라 변하는 데이터로 대규모 애플리케이션을 구축하는 한 가지 문제를 해결하기 위해 React를 구축합니다.

시간이 지남에 따라 데이터가 변경되는 대규모 애플리케이션을 구축하기 위해 React는 주로 다음과 같은 기능을 가지고 있습니다.

1 특정 시점에 애플리케이션이 어떤 모습이어야 하는지 간단히 설명하면 React는 UI 인터페이스 업데이트를 자동으로 관리합니다. 데이터 변경 시간
2. 데이터가 변경되면 React는 실제로 변경 사항의 일부만 업데이트합니다
React는 재사용 가능한 구성요소를 구축하는 것입니다. 실제로 React를 사용할 때 우리는 구성요소를 구축하는 것 이상의 작업을 수행합니다. 캡슐화를 사용하면 코드 재사용, 테스트 및 문제 분리가 더 쉬워집니다.

React 공식 홈페이지에서 "우리가 React를 만든 이유"를 통해 React 문서를 만드는 네 가지 이유에 대해 배웠습니다.
1. React는 MVC 프레임워크가 아니며, React는 구성 가능한 사용자 인터페이스를 구성하기 위한 라이브러리입니다. 시간이 지남에 따라 데이터를 변경하는 재사용 가능한 UI 구성 요소의 생성을 권장합니다.
2. React는 템플릿을 사용하지 않습니다.
전통적으로 웹 애플리케이션 UI는 템플릿이나 HTML 지침을 사용하여 구성됩니다. 이러한 템플릿은 UI를 구축할 수 있는 완전한 추상화 세트를 지정합니다. 차이점은 React가 사용자 인터페이스를 구성 요소로 분할하여 구축을 처리한다는 것입니다. 이는 React가 실제 모든 기능을 갖춘 프로그래밍 언어를 사용하여 뷰를 렌더링한다는 것을 의미합니다.
3. 반응형 업데이트는 매우 간단합니다.
기존 JS 애플리케이션에서는 데이터 변경을 고려한 다음 DOM에 변경하여 최신 상태를 유지하도록 지시해야 합니다. AngularJS도 지시어와 데이터 바인딩을 통해 선언적 인터페이스를 제공하여 DOM 노드를 수동으로 업데이트하는 관련 기능을 요청합니다. (자세한 내용을 보려면 PHP 중국어 웹사이트
React Reference Manual 칼럼을 참조하세요.)

React는 처음으로 컴포넌트가 초기화될 때 render 메서드를 호출하여 생성을 시도합니다. 가벼운 성능. 이 표현을 통해 태그 문자열이 생성된 다음 문서에 삽입됩니다. 데이터가 변경되면 render 메서드가 다시 호출됩니다. 업데이트를 최대한 효율적으로 완료하기 위해 렌더링 호출에서 반환된 값을 새 값과 비교한 다음 적용된 DOM에 최소한의 변경을 생성합니다.

렌더링에서 반환된 데이터는 문자열도 아니고 DOM 노드도 아닙니다. DOM의 모양을 설명하는 경량 유형입니다.

4. HTML5는 시작에 불과합니다.

React에는 자체 경량 문서 표현이 있으므로 이를 사용하여 멋진 작업을 수행할 수 있습니다.
1. Facebook 동적 테이블은 렌더링을 통해 HTML을 대체할 수 있습니다. page' 웹 애플리케이션은 전적으로 React와 Backbone.Router로 구축되었습니다. 디자이너는 평소처럼 JSX를 사용하여 React 코드를 작성할 수 있습니다.
3. Objective-C 브리지를 통해 기본 iOS 보기를 구동하기 위해 React를 사용하여 웹 워크스테이션에서 React를 실행하는 내부 프로토타입 애플리케이션을 구축했습니다.
4. SEO, 성능, 코드 공유 및 프로젝트 유연성을 촉진하는 React를 서버에서 실행할 수 있습니다.
5. 이벤트는 모든 최신 브라우저(IE8 포함)에서 일관되고 표준화되어 있으며 이벤트 위임이 자동으로 사용됩니다.

React의 주요 원칙

가상 DOM 및 가상 DOM
기존 웹 애플리케이션에서 DOM 작업은 일반적으로 직접 업데이트되지만 DOM 업데이트는 일반적으로 상대적으로 비용이 많이 듭니다. DOM에 대한 작업을 최대한 줄이기 위해 React는 DOM을 직접 작동하는 대신 DOM을 업데이트하는 다양하고 강력한 방법을 제공합니다. Virtual DOM은 경량의 가상 DOM으로, React로 추상화된 객체로 DOM이 어떤 모습이어야 하고 어떻게 표현되어야 하는지 설명합니다. 이 Virtual DOM을 사용하여 보다 실제적인 DOM을 업데이트하고, 이 Virtual DOM은 실제 DOM 업데이트를 관리합니다.
이 추가 가상 DOM 작업 계층을 통해 속도가 더 빨라질 수 있는 이유는 무엇입니까? React에는 diff 알고리즘이 있기 때문입니다. Virtual DOM을 업데이트한다고 해서 실제 DOM에 즉시 영향을 미칠 것이라는 보장은 없습니다. React는 이벤트 루프가 끝날 때까지 기다린 후 이 diff 알고리즘을 사용하여 현재 새 값을 비교하여 가장 작은 값을 계산합니다. 실제 DOM을 업데이트하는 단계입니다.

React Diff

1. Virtual DOM은 실제로 변경되는 인터페이스 부분에서만 실제 DOM 작업이 수행되도록 보장합니다.
웹 페이지는 DOM 트리로 구성됩니다. 특정 부분이 변경되면 실제로는 특정 DOM 노드가 변경되는 것입니다. React에서 UI 인터페이스를 구축한다는 아이디어는 현재 상태를 기반으로 인터페이스를 결정하는 것입니다. 이전과 이후의 두 상태는 두 인터페이스에 해당하며 반응은 두 인터페이스 간의 차이점을 비교합니다.
Facebook 엔지니어는 Diff 알고리즘의 복잡성을 O(n)으로 직접 줄이는 두 가지 간단한 가정을 했습니다.
1. 두 개의 동일한 구성 요소는 유사한 DOM 구조를 생성하고, 서로 다른 구성 요소는 서로 다른 DOM 구조를 생성합니다. 동일한 레벨의 하위 노드 그룹은 고유 ID로 구분할 수 있습니다.

노드의 동일한 위치 전후에 다양한 유형의 노드가 출력됩니다. React는 이전 노드를 직접 삭제한 다음 새 노드를 생성하고 삽입합니다. 노드를 삭제하면 노드가 완전히 파괴됩니다. 삭제된 노드 아래에 하위 노드가 있으면 해당 하위 노드도 완전히 삭제되며 나중에 사용자가 비교할 수 없습니다.

React가 동일한 위치에서 다른 노드를 발견하면 컴포넌트를 생성할 때 첫 번째 컴포넌트는 단순히 소멸되고 새로 생성된 컴포넌트가 추가됩니다. 서로 다른 구성 요소는 일반적으로 서로 다른 DOM 구조를 생성합니다. 구조를 비교하는 데 시간을 낭비하는 대신 해당 구조는 기본적으로 완전히 동일하지 않습니다.

2. 레벨별 노드 비교

React에서 트리 알고리즘은 매우 간단합니다. 두 트리는 동일한 레벨의 노드만 비교합니다. 이전 트리와 동일한 노드 수준의 수정된 트리를 비교합니다. React는 동일한 상위 노드 아래의 모든 하위 노드를 비교합니다. 노드가 더 이상 존재하지 않는 것으로 확인되면 해당 노드와 해당 하위 노드는 완전히 삭제되며 더 이상 비교가 수행되지 않습니다. 따라서 DOM 구조 비교는 트리를 한 번만 순회하면 완료됩니다.

React는 동일한 레이어에 있는 노드의 위치 변환과 다른 레이어에 있는 노드의 간단한 삭제 및 생성만 고려합니다. 루트 노드가 하위 노드의 A가 누락되었음을 발견하면 A를 직접 파괴하고, D가 하위 노드를 하나 더 발견하면 A를 하위 노드로 생성합니다.

성능 향상에 도움이 되는 안정적인 구조를 유지하기 위해 실제로 DOM 노드를 제거하거나 추가하는 대신 CSS를 통해 노드를 숨기거나 표시할 수 있습니다.

동일한 유형의 노드의 경우 알고리즘은 비교적 간단하며 React는 노드 변환을 달성하기 위해 해당 속성을 재설정합니다.

예:
renderA:

renderB:

가상 DOM의 스타일 속성은 약간 다르며 해당 값은 단순한 문자열이 아니라 객체여야 합니다.

3. 목록 노드 비교:

React는 동일한 레이어에 있지 않은 노드가 정확히 동일하더라도 삭제하고 다시 생성합니다. 목록 노드의 Diff 알고리즘을 사용해야 합니다.

React는 왜 등장했나요? React 등장의 역사적 배경 소개