반응과 반응 네이티브의 차이점은 무엇입니까-JS 튜토리얼-php.cn

반응과 반응 네이티브의 차이점은 무엇입니까

王林

풀어 주다： 2021-01-18 17:44:15

원래의

15779명이 탐색했습니다.

React와 React Native의 차이점은 다음과 같습니다. 1. 프레임워크가 작동하는 플랫폼이 다릅니다. 2. 작동 원리가 다릅니다. 3. 렌더링 주기가 다릅니다. 4. React Native의 모든 요소가 다음으로 대체됩니다. 플랫폼에 의해 지정된 반응 구성 요소 5. 호스트 플랫폼의 API가 다릅니다.

반응과 반응 네이티브의 차이점은 무엇입니까

이 기사의 환경: windows10, React16 버전, Dell G3 컴퓨터.

(학습 영상 공유: react 영상 튜토리얼)

차이점은 다음과 같습니다.

1. 프레임워크에서 사용하는 플랫폼이 다릅니다.

RN은 두 프레임워크 모두 JSX 개발 구문을 사용하지만 RN은 다음과 같습니다. React는 브라우저를 렌더링 플랫폼으로 사용하는 반면, 실제로 네이티브 렌더링된 iOS 및 Android 모바일 애플리케이션을 개발하기 위한 JS 프레임워크입니다.

2. 작동 원리의 차이

가상 DOM은 개발자가 설명하는 뷰와 실제로 페이지에 렌더링되는 뷰 사이에 있습니다. 브라우저에서 대화형 사용자 인터페이스를 렌더링하려면 개발자가 브라우저의 문서 객체 모델을 작동해야 합니다. Virtual DOM의 출현은 이 작업 부분에서 소비되는 성능을 절약하기 위한 것입니다.

그러나 Virtual DOM의 엄청난 잠재력은 이 추상화 계층에 있으며, 이는 많은 가능성을 가져올 수 있습니다.

React Native의 작동 원리는 Objective-C API를 호출하여 iOS 구성 요소를 렌더링하고 Java API를 호출하여 DOM으로 렌더링하는 대신 Android 구성 요소를 렌더링하는 것입니다. 브리징을 사용하면 React는 호스트 플랫폼에서 열린 UI 구성 요소를 호출할 수 있으며, React 구성 요소는 render 메서드를 통해 인터페이스를 설명하는 마크업 코드를 반환합니다. 웹 플랫폼인 경우 React는 결국 마크업 코드를 React Native의 브라우저 DOM으로 구문 분석하고, 마크업 코드는 플랫폼별 구성 요소로 구문 분석됩니다. 예를 들어 iOS에서는 플랫폼.

3. 렌더링 주기

React의 렌더링 주기는 React 구성 요소가 DOM에 마운트된 후 시작되며, 그런 다음 React는 렌더링 주기에 들어가 필요에 따라 구성 요소를 렌더링합니다. 렌더링 단계에서 React는 개발자가 요청 시 페이지로 직접 반환하여 반환한 HTML 태그를 렌더링합니다.

React Native의 라이프 사이클은 렌더링 측면에서 기본적으로 React와 동일합니다. React Native는 브리징에 의존하고 UI 메인 스레드에서 실행되지 않기 때문에 사용자 경험에 영향을 주지 않고 이러한 비동기 호출을 실행할 수 있습니다.

4. 구성 요소 만들기

웹 환경용 React를 작성할 때 뷰는 궁극적으로 React Native의 일반 HTML 요소로 렌더링되어야 하며, 모든 요소는 iOS와 같은 플랫폼별 React 구성 요소로 대체됩니다. < ;View> 컴포넌트는 UIView로 렌더링되며, Android 플랫폼에서는 View로 렌더링됩니다.

UI 요소는

와 같은 기본 HTML 요소가 아닌 모두 React 구성 요소이므로 각 구성 요소를 사용할 때 다음과 같이 명시적으로 가져와야 합니다.

import { DatePickerIOS } from &#39;react-native&#39;;

로그인 후 복사

5, 기본 스타일

웹에서는 스타일링 React CSS 스타일을 사용하는 구성 요소는 이미 개발 프로세스에서 없어서는 안될 부분입니다. React는 일반적으로 우리가 CSS를 작성하는 방식에 영향을 미치지 않으며 (상태 및 소품을 통해) 스타일의 동적 생성을 더 쉽게 만듭니다. 하지만 그 외에 React는 기본적으로 스타일을 처리하는 방식에 신경 쓰지 않습니다.

웹이 아닌 플랫폼에서 레이아웃과 스타일을 처리하는 방법에는 여러 가지가 있습니다. React Native를 사용할 때 스타일을 처리하는 데 표준 방법만 사용하면 됩니다. React와 호스트 플랫폼 간의 연결에는 축소된 버전이 포함됩니다. CSS 하위 집합 구현 중 이 CSS 하위 집합은 주로 flexbox를 통해 배치되며 모든 CSS 규칙을 구현하는 대신 가능한 한 단순화하려고 노력합니다. CSS 지원 수준이 브라우저마다 다른 웹 플랫폼과 달리 React Native는 일관된 스타일 규칙을 달성합니다.

6. 호스트 플랫폼 API

웹 환경을 사용하는 React와 React Native의 가장 큰 차이점은 호스트 플랫폼의 API에 있습니다.

웹에서는 일관되지 않고 단편적인 표준 채택으로 인해 발생하는 문제를 처리해야 하는 경우가 많으며 대부분의 브라우저는 일부 핵심 기능만 지원합니다. 그러나 React Native에서는 플랫폼별 API가 훌륭한 기본 사용자 경험을 제공하는 데 큰 역할을 합니다. 물론 고려해야 할 측면이 더 많습니다. API는 데이터 저장부터 지리 서비스, 카메라와 같은 하드웨어 장치 제어에 이르기까지 다양한 기능을 다룹니다. 예를 들어, React Native와 가상 현실 헤드셋 간의 API는 어떤 모습일까요?

기본적으로 iOS 및 Android 버전의 React Native는 많은 공통 기능을 지원하며 모든 비동기 네이티브 API도 지원할 수 있습니다. React Native를 사용하면 호스트 플랫폼 API를 더 쉽고 직관적으로 사용할 수 있으며 자유롭게 실험할 수 있습니다. 동시에 타겟 플랫폼의 경험을 어떻게 일치시킬지 고민하고 인터랙션 프로세스를 마음속에 디자인해 보세요. 말할 필요도 없이 React Native의 브릿지는 호스트 플랫폼의 모든 API를 노출할 수 없습니다.

지원되지 않는 기능을 사용해야 하는 경우 React Native에 직접 추가할 수 있습니다. 또한, 이미 다른 사람이 통합해 놓으면 더 좋을 것이므로 시기적절하게 커뮤니티에서 구현을 확인하는 것이 좋습니다. 플랫폼 API를 사용하면 코드 재사용에도 도움이 된다는 점은 주목할 가치가 있습니다. 동시에 플랫폼별 기능을 구현하는 React 구성 요소도 플랫폼별로 다릅니다.

이러한 구성 요소를 분리하고 캡슐화하면 애플리케이션의 유연성이 향상됩니다. 물론 이는 웹 애플리케이션을 개발하는 경우에도 적용됩니다. React와 React Native 간에 코드를 공유하려면 React Native에는 DOM과 같은 API가 존재하지 않는다는 점을 기억하세요.

관련 추천: js 튜토리얼

위 내용은 반응과 반응 네이티브의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!