리액트 프레임워크는 언제 나왔나요?

React 프레임워크는 2013년에 출시되었습니다. React는 Facebook의 내부 프로젝트에서 시작되었으며 2013년 5월에 오픈 소스로 제공되었습니다. React는 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리로, 주로 UI를 구축하는 데 사용됩니다. 사용자는 UI 렌더링에 도움이 되는 선언 코드, 정적 HTML DOM 요소 또는 동적 변수 및 대화형 전달과 같은 다양한 유형의 매개변수를 React에서 전달할 수 있습니다. 응용 프로그램 구성 요소.

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

1. React의 기원과 발전

React는 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리입니다. 회사가 시장에 있는 모든 JavaScript MVC 프레임워크에 만족하지 않았기 때문에 Facebook 내부 프로젝트에서 시작되었습니다. Instagram 웹사이트를 설정하기 위해 자신만의 세트를 작성하기로 결정했습니다. 만들고 나서 이 세트가 매우 유용하다는 것을 알게 되었고, 2013년 5월에 오픈 소스로 공개되었습니다.

2. React의 출발점

HTML 기반의 프론트엔드 인터페이스 개발은 점점 더 복잡해지고 있으며, 그 본질적인 문제는 기본적으로 서버나 사용자로부터의 동적 데이터를 어떻게 효율적으로 반영하느냐에 달려있습니다. 복잡한 사용자 인터페이스에 입력합니다. Fackbook의 React 프레임워크는 이 문제를 완전히 지향하는 솔루션입니다. 공식 웹사이트 설명에 따르면 시작점은 시간에 따라 변경되는 데이터로 대규모 애플리케이션을 개발하는 데 사용됩니다(시간에 따라 변경되는 데이터로 대규모 애플리케이션 구축). 전통적인 프런트엔드 개발과 비교하여 React는 프런트엔드 인터페이스의 고성능 및 효율적인 개발을 달성하기 위한 상당히 대안적인 접근 방식을 열었습니다.

React는 주로 UI 구축에 사용됩니다. UI 렌더링에 도움이 되는 선언 코드, 정적 HTML DOM 요소, 동적 변수, 심지어 대화형 애플리케이션 구성요소까지 React에서 다양한 유형의 매개변수를 전달할 수 있습니다.

3. Recat과 기존 MVC의 관계

경량 뷰 레이어 라이브러리! 사용자 인터페이스 구축을 위한 JavaScript 라이브러리

React는 기껏해야 MVC의 (뷰) 레이어로 간주될 수 있습니다. React는 MVC 개발 모델을 완전히 인식하지 못합니다. UI. React는 인터페이스를 독립적인 작은 블록으로 나누는 것으로 간단히 이해할 수 있습니다. 각 블록은 구성 요소를 결합하고 중첩하여 페이지를 구성할 수 있습니다. 4. React의 고성능 구현: Virtual DOM

원리: 개발 과정에서 예측할 수 없는 데이터를 실시간으로 UI에 반영해야 하고, 그 다음에는 DOM을 운영해야 합니다. 그러나 DOM을 자주 또는 복잡하게 조작하면 많은 성능 문제가 발생합니다. ——고성능의 복잡한 DOM 작업을 수행하는 방법은 일반적으로 프런트엔드 개발자의 기술을 나타내는 중요한 지표입니다. React는 이를 위해 가상 DOM(가상 DOM) 메커니즘을 도입합니다. DOM API 세트는 자바스크립트를 사용하여 브라우저 측에서 구현됩니다. React를 기반으로 개발할 때 모든 DOM 구성은 데이터가 변경될 때마다 전체 DOM 트리를 다시 렌더링합니다. 그런 다음 React는 현재 전체 DOM 트리를 이전 DOM 트리와 비교하여 DOM 구조의 차이를 얻습니다. , 변경이 필요한 부분만 실제 브라우저 DOM 업데이트를 수행합니다. 또한 React는 가상 DOM의 새로 고침을 일괄 처리할 수 있습니다. 이벤트 루프(이벤트 루프)의 두 가지 데이터 변경 사항이 병합됩니다. 예를 들어 노드 내용을 A-B, B-A로 계속 변경하면 React는 A가 B가 된다고 생각합니다. , 그리고 다시 B에서 A로 UI에는 변화가 없으며 수동으로 제어하는 ​​경우 이 로직은 일반적으로 매우 복잡합니다

React Fiber:

React16 이후 출시된 React Core 알고리즘, React Fiber는 업데이트입니다. 핵심으로 알고리즘 재구현(공식 웹사이트 성명). diff 알고리즘은 이전에 사용되었습니다이전 React에서는 업데이트 프로세스가 동기식이어서 성능 문제가 발생할 수 있습니다.

React는 컴포넌트 트리를 로드하거나 업데이트하기로 결정하면 각 컴포넌트의 수명 주기 함수 호출, Virtual DOM 계산 및 비교, 마지막으로 DOM 트리 업데이트 등 많은 작업을 수행합니다. 즉, 로딩이나 업데이트 프로세스가 시작되자마자 중간에 중단되지 않습니다. JavaScript의 단일 스레드 특성으로 인해 구성 요소 트리가 매우 크고 각 동기화 작업에 시간이 너무 오래 걸리면 지연이 발생합니다.

React Fiber의 방법은 실제로 매우 간단합니다. 바로 샤딩입니다. 긴 작업을 여러 개의 작은 조각으로 나눕니다. 각 작은 조각의 작업 시간은 매우 짧습니다. 비록 총 시간은 여전히 ​​매우 길지만, 각 작은 조각이 실행된 후에는 다른 작업을 실행할 기회가 주어지므로 유일한 스레드가 됩니다. 배타적이지 않으며 다른 작업은 계속 실행될 수 있습니다.

5. React의 특징과 장점

1. 가상 DOM

이전 DOM 운영 방식은 document.getElementById()를 통해 이루어졌습니다. 이 프로세스에는 실제로 DOM 구조를 먼저 읽고 변환하는 과정이 포함되었습니다. 구조를 변수로 변환하고 연산을 수행

그리고 Reactjs는 일련의 DOM 모델을 변수 형태로 정의합니다. 모든 작업과 변환이 변수에 직접적으로 수행되므로 실제 DOM을 실행할 필요성이 줄어듭니다. 성능이 정말 높습니다. 프레임워크는 DOM을 다루지 않습니다

2. 컴포넌트 시스템

React의 핵심 아이디어는 페이지의 모든 영역이나 요소를 컴포넌트로 간주할 수 있다는 것입니다

그럼 컴포넌트란 무엇일까요?

Component는 html, css, js 및 이미지 요소를 동시에 포함하는 집합체를 말합니다

3. 단방향 데이터 흐름

사실, Reactjs의 핵심 내용은 데이터 바인딩입니다. 데이터 바인딩이라고 불리는 것은 일부 서버 측 데이터를 프런트엔드 페이지에 바인딩하고 개발자는 비즈니스

4 JSX 구문

구현에만 집중할 수 있다는 것을 의미합니다. vue에서는 렌더링 기능을 사용하여 빌드합니다. 저장하기 때문에 성능이 더 높은 컴포넌트의 dom 구조 템플릿을 찾아 컴파일하는 과정을 거쳤는데, createElement를 사용하여 렌더에서 구조를 생성할 때 코드의 가독성이 떨어지고 로드가 많아집니다. JSX 구문을 사용하여 렌더에서 DOM을 생성하면 이 문제를 해결할 수 있지만 전제는 jsx

를 컴파일하려면 도구를 사용해야 한다는 것입니다. 【관련 권장 사항: Redis 비디오 튜토리얼, 프로그래밍 비디오】

위 내용은 리액트 프레임워크는 언제 나왔나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!