React에 대한 첫 소개

高洛峰원래의: 2016-11-15 15:09:591257검색

React에 대한 첫 소개

2015년에 오프라인 행사에 참석하여 처음으로 React라는 단어를 들었던 기억이 어렴풋이 나네요. 당시 발표자는 Guo Dafeng이었습니다. , 각도 및 반응 비교 비디오: React.js Conf 2015. 당시 저는 주로 Anglejs 개발에 종사하고 있었는데, 페이지가 복잡할 때 발생하는 Angle의 성능 문제에 대한 고통을 잘 알고 있었습니다. 이번 영상에서 성능 비교를 보고 바로 React에 깊은 인상을 받았습니다. 이제 React를 살펴보겠습니다~

View Library

React는 AngularJS, Backbone 등 MVC 프레임워크와 달리 사용자 인터페이스 구축을 위해 Facebook에서 출시한 Javascript 라이브러리입니다. 레이어(MVC의 V)는 재사용 가능한 프런트 엔드 UI 구성 요소를 만드는 데 사용되는 라이브러리입니다. 동시에 데이터가 변경되면 React는 해당 구성 요소를 적시에 효과적으로 업데이트하고 렌더링합니다. 점점 더 복잡해지는 프런트엔드 인터페이스, 특히 데이터가 지속적으로 변경되는 웹 애플리케이션의 경우 React는 변화하는 데이터를 페이지에 효율적이고 정확하게 반영할 수 있습니다.

상태 머신 보기

기존 웹 애플리케이션에서는 데이터가 변경될 때 DOM 노드의 변경 사항을 동기화해야 합니다. React는 인터페이스를 상태 머신으로 처리합니다.

UI = f (상태)

인터페이스 상태가 변경되면 React는 해당 상태에 따라 해당 구성 요소를 신속하고 효과적으로 업데이트하고 렌더링하므로 동일한 상태의 렌더링 성능이 일관됩니다.

JSX

기존 웹 애플리케이션에서는 템플릿이나 HTML 명령어를 사용하여 사용자 인터페이스를 구축했지만, React는 JSX(ECMAScript를 확장한 XML과 유사한 구문) 선언적 작성 방법을 사용하므로 이보다 장점이 있습니다. 템플릿:

JavaScript는 유연하고 확장성이 뛰어난 프로그래밍 언어입니다.

페이지 마크업 언어와 보기 논리를 통합하여 보기를 더 쉽게 확장하고 유지 관리할 수 있습니다.

문자열 연결이 없습니다. XSS 취약점의 존재를 줄이기 위해 뷰 콘텐츠가 JavaScript에 통합되었습니다.

효율적인 업데이트

애플리케이션 상태가 변경되면 React는 구성 요소와 인터페이스를 효율적으로 업데이트하고 렌더링할 수 있습니다.

가상 DOM: 메모리의 경량 설명 객체를 사용하여 Javascript를 통해 실제 DOM 노드의 구조와 스타일을 표현합니다

차이 알고리즘: 최소 Diff 트리 집합을 효율적이고 빠르게 생성

일괄 업데이트: 여러 상태 업데이트를 하나의 업데이트 작업으로 효과적으로 병합

React는 가상 DOM을 사용하여 실제 DOM을 설명합니다. 애플리케이션 상태가 변경되면 효율적인 차이 알고리즘을 통해 최소한의 Diff 트리 집합을 생성하고 여러 업데이트 작업을 첫째, 실제 DOM에 대한 직접적인 작업을 줄여 성능을 크게 향상시킵니다.

이벤트 프록시

React는 이벤트 버블링, 브라우저 간 실행의 일관성을 유지하고 IE8에서 HTML5 이벤트도 사용할 수 있는 이벤트 프록시 메커니즘을 사용합니다. React는 IE와 W3C 표준 구현 간의 호환성 문제를 제거하는 "합성 이벤트" 계층을 구현합니다. JSX를 통해 바인딩된 이벤트는 "합성 이벤트"에 바인딩됩니다. "합성 이벤트"는 이벤트 위임을 통해 구성 요소의 최상위 레이어에 바인딩되며, 바인딩된 이벤트는 구성 요소가 언로드될 때 자동으로 삭제됩니다.

Flux 단방향 흐름

Flux는 Facebook에서 출시한 애플리케이션 아키텍처입니다. 단방향 데이터 흐름을 옹호합니다.

React에 대한 첫 소개