반응이란 무엇입니까? 리액트는 주로 무슨 일을 하나요? (Q&A)

이 글은 주로 react에 대한 기본적인 이해를 소개합니다. 감히 React에 대해 많이 알고 있다고 말할 수 있나요? 그렇지 않다면 이 글을 살펴보세요

1. React?

Facebook 엔지니어들이 대규모 프로젝트를 작업할 때 MVC는 매우 거대한 코드 기반과 거대한 조직으로 인해 빠르게 매우 복잡해졌고, 새로운 기능을 추가해야 할 때마다 또는 기능의 복잡성으로 인해 시스템이 기하급수적으로 증가하여 코드가 취약해지고 예측할 수 없게 됩니다. 따라서 MVC는 시스템에 많은 모델과 해당 모델이 있는 경우 대규모 애플리케이션에 적합하지 않다고 생각합니다. 모델을 보면 복잡성이 급격히 증가하여 이해하고 디버깅하기가 매우 어려워지며, 특히 모델과 뷰 간의 양방향 데이터 흐름이 가능합니다.

위의 이유로 Facebook은 MVC가 위의 문제를 해결하기 위해 "더 예측 가능하도록 특정 방식으로 코드를 구성"할 필요가 있다고 생각합니다. 이를 구현하기 위해 Flux와 React를 제안했습니다.

2、 React란?

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

React는 사용자 인터페이스 구축을 위한 JavaScript 라이브러리입니다. React는 주로 UI를 구축하는 데 사용됩니다. 많은 사람들이 생각합니다. React는 MVC의 V(뷰)입니다. React는 높은 성능과 매우 간단한 코드 로직을 가지고 있으며 점점 더 많은 사람들이 이에 주목하고 사용하기 시작했습니다.

3. React는 어떤 문제를 해결하나요?

우리는 한 가지 문제를 해결하기 위해 React를 만들었습니다: 대규모 애플리케이션 구축

4. React 기능

1.선언적 디자인 −React는 선언적 패러다임을 채택하여 애플리케이션을 쉽게 설명할 수 있습니다.

2.효율적 −React는 DOM을 시뮬레이션하여 DOM과의 상호 작용을 최소화합니다.

3.유연함 −React는 알려진 라이브러리나 프레임워크에서 잘 작동합니다.

4.JSX − JSX은 입니다 JavaScript 구문의 확장입니다. React는 개발에 사용되지 않을 수 있습니다 JSX, 하지만 사용을 권장합니다.

5.구성요소 − React를 통해 구성 요소를 빌드하면 코드를 더 쉽게 재사용하고 대규모 프로젝트 개발에 잘 적용할 수 있습니다.

6.단방향 응답 데이터 흐름 − React 는 단방향 응답 데이터 흐름을 구현하여 반복되는 코드를 줄여 기존 데이터 바인딩보다 간단합니다.

5. React의 주요 원칙

기존 웹 애플리케이션에서 DOM 작업은 일반적으로 직접 업데이트되지만 DOM 업데이트는 일반적으로 상대적으로 비용이 많이 듭니다. DOM에 대한 작업을 최대한 줄이기 위해 React는 직접적인 DOM 작업 대신 DOM을 업데이트하는 다양하고 강력한 방법을 제공합니다. 그것은 React에 의해 추상화된 객체인 경량 가상 DOM인 VirtualDOM이며, DOM이 어떤 모습이어야 하는지, 어떻게 표현되어야 하는지를 설명합니다. 이 가상을 통해 DOM은 실제 DOM을 업데이트하고, 이 가상 DOM은 실제 DOM의 업데이트를 관리합니다. (자세한 내용을 알고 싶으시면 PHP 중국어 홈페이지React Reference Manual 칼럼을 참고하세요)

왜 이 추가 레이어를 통해 Virtual DOM의 동작이 더 빨라질 수 있나요? 이는 React에 diff 알고리즘이 있기 때문입니다. VirtualDOM을 업데이트한다고 해서 실제 DOM에 즉시 영향을 미칠 것이라는 보장은 없습니다. React는 이벤트 루프가 끝날 때까지 기다린 다음 이 diff 알고리즘을 사용하여 현재 새 dom 표현을 비교하여 최소 단계를 계산합니다. 이전 DOM으로 업데이트하세요.

가장 확실한 이점은 델타 수준의 DOM 업데이트를 달성할 수 있는 React의 소위 dom diff입니다. 데이터 변경으로 인해 DOM이 변경되면 React는 전역적으로 새로 고치지 않고 내부 DOM diff 알고리즘을 통해 차이점을 계산한 다음 가장 작은 단위로 업데이트합니다. React가 성능이 좋다고 알려진 이유이기도 합니다.

6. 구성 요소 구성 요소

DOM 트리의 노드를 요소라고 부르지만 여기서는 가상 DOM의 구성 요소라고 합니다. Virtual DOM의 노드는 구성 요소로 구성된 완전한 추상 구성 요소입니다. 구성 요소는 다음에서 사용됩니다. 구성 요소가 있으면 DOM 차이 계산이 더 효율적이기 때문에 React에서는 매우 중요합니다.

7. 신청

facebook, Yahoo, Reddit 등 다양한 해외 애플리케이션이 있습니다. Sites-Using-React 목록은 github에서 보실 수 있습니다: https://github.com/facebook/react/wiki/Sites-Using-React 중국에 계시다면 확인해 보니 상대적으로 있는 것 같습니다. 현재 항저우에서 한 대를 알고 있습니다. 대부분의 기술은 일반적으로 국내 적용이 느리다.

8. 비교 분석

#🎜 🎜#React는 Backbone, Angular 등과 같은 다른 js 프레임워크와 어떻게 비교됩니까?

#🎜 🎜 #1. React는 MVC 프레임워크가 아니며 UI, 즉 뷰 레이어에 중점을 두고 반복적으로 호출하기 쉬운 웹 구성요소를 구축하는 것입니다. 🎜#2. 볼 데이터, 비양방향 데이터 바인딩

3. 직접적이지 않음 DOM 객체를 조작하는 대신 가상 DOM이 사용됩니다. 가장 작은 단계로 diff 알고리즘을 실제 DOM에 적용합니다.

4 대부분의 경우 가상 DOM을 프로그래밍하는 것은 편리하지 않습니다#🎜🎜. ## 🎜🎜#

9. React Native와의 관계#🎜🎜 #

React의 디자인 아이디어는 매우 독특하고 혁신적인 혁신이며 뛰어난 성능을 가지고 있으며 코드 로직이 매우 간단하기 때문입니다. 그래서 점점 더 많은 사람들이 웹의 미래가 아닐까 생각하며 주목하고 활용하기 시작했습니다. 개발을 위한 주류 도구. 초기 UI 엔진부터 완전한 프런트엔드 및 백엔드 세트에 이르기까지 프로젝트 자체가 점점 더 커졌습니다. 웹앱 솔루션. 파생된 React Native 프로젝트는 훨씬 더 야심찬 목표를 가지고 있으며 이를 사용하여 웹 앱을 작성하기를 희망합니다. Native App을 작성하는 방법. 이것이 실현될 수 있다면 인터넷 산업 전체가 전복될 것입니다. 왜냐하면 동일한 그룹의 사람들이 UI를 한 번만 작성하면 서버, 브라우저 및 휴대폰에서 동시에 실행할 수 있기 때문입니다.

이번 글은 여기까지입니다. (자세한 내용을 보시려면 PHP 중국어 홈페이지를 참고하세요) React 사용자 매뉴얼열 학습), 궁금한 점이 있으면 아래에 메시지를 남겨주시면 됩니다.

위 내용은 반응이란 무엇입니까? 리액트는 주로 무슨 일을 하나요? (Q&A)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!