React Native는 크로스 플랫폼 지원, OTA 업데이트, 실시간 재로드, 비용 효율성 등과 같은 여러 이점과 함께 번들로 제공되지만 반응 네이티브 애플리케이션 확장에서 가장 큰 병목 현상은 더 많은 모듈을 추가할 때, 애플리케이션이 데이터 집약적이 될 때 또는 여러 개일 때 성능이었습니다. 다리를 통과해야 합니다.

그러나 현재 아키텍처는 어떻게 작동합니까?

React Native 아키텍처는 세 가지 스레드에 의존합니다. a) UI 스레드: Android 및 iOS 뷰를 렌더링하는 데 사용되는 기본 애플리케이션 스레드입니다. b) 섀도우 스레드: 호스트 플랫폼에서 렌더링하기 전에 요소의 레이아웃( Yoga 사용)을 계산하는 일종의 백그라운드 스레드입니다 . c) JS 스레드: 반응 네이티브 애플리케이션의 모든 논리 를 처리하는 번들 JS입니다 .

이러한 스레드 간의 상호 작용은 직접적이지 않으며 하나의 스레드가 다른 스레드와 상호 작용해야 할 때마다 브리지를 통과하기 위해 데이터를 JSON으로 직렬화 및 역직렬화하는 힘든 작업을 거쳐야 합니다. 이로 인해 불필요한 데이터 복사가 발생하고 작업이 비동기식이고 엄격한 타이핑이 없기 때문에 이 브리지는 혼잡함을 꽤 쉽게 극복할 수 있습니다.

현재 아키텍처의 몇 가지 제한 사항:
1. Javascript와 네이티브 측은 서로를 인식하지 못하고 비동기 JSON 메시지에 의존합니다.
2. 시작 시 모든 모듈이 로드되므로 상호 작용 시간이 늘어납니다.
3. 작업의 우선 순위 없음: 중요한 사용자 상호 작용은 다른 작업보다 우선 순위를 지정할 수 없습니다.
4. 브리지 직렬화
5. UI 요소는 JS 스레드에서 직접 액세스할 수 없습니다.

JSI 소개

JSI는 자바스크립트와 기본 부분이 상호 작용하는 방식에 큰 변화를 가져옵니다. JS와 C++ 간의 인터페이스를 통해 두 영역 간의 직접적인 통신을 제공합니다. JavaScript 인터페이스를 사용하여 JS는 호스트 개체에 대한 참조를 보유하고 개체에 대한 메서드를 호출할 수 있습니다. 호스트 개체의 도움으로 이제 자바스크립트 컨텍스트에서 기본 개체를 사용할 수 있습니다. 가장 큰 병목 지점이었던 브리지는 여러 부분으로 나뉩니다.

구조

UI 관리자의 재구성인 Facebook에서 만든 새로운 렌더링 시스템입니다. 이 렌더러는 C++로 구현되며 코어는 플랫폼 간에 공유됩니다. 이전 구현에서 레이아웃 생성에는 JSON의 직렬화와 같은 여러 단계가 포함되었고 브리지가 차단되었을 때 주요 문제가 있었던 브리지 건너뛰기(예: 무한 목록을 스크롤하는 동안 프레임 드롭)가 포함되었습니다. 새로운 구현을 통해 UI 관리자는 C++에서 직접 Shadow Tree를 생성할 수 있으며, 이는 영역 간 점프 수를 줄여 경험을 크게 향상시킵니다. 작업은 일반적으로 JavaScript 스레드에서 React(JavaScript)에서 렌더러(C++)로 실행되는 동기식 및 스레드 안전입니다. 또한 자바스크립트 값을 JSI에서 직접 선택할 수 있으므로 데이터 직렬화가 덜 필요합니다. 이 직접 제어는 또한 작업의 우선 순위를 지정하는 데 도움이 되므로 렌더러는 이제 특정 사용자 상호 작용의 우선 순위를 지정하여 적시에 처리되도록 할 수 있습니다. 이렇게 하면 목록, 탐색 및 제스처 처리 성능이 크게 향상됩니다.

터보 모듈

이전 구현에서는 기본 모듈에 대한 참조가 없었기 때문에 시작 시 모든 모듈이 로드되어 TTI(Time to Interactive)가 증가했지만 터보 모듈을 사용하면 필요할 때 모듈을 지연 로드할 수 있으므로 도움이 됩니다. 시작 시간을 개선합니다. 예: 링크에서 문서를 인쇄하는 모듈이 있는 경우 이전 아키텍처에서 수행 중이던 응용 프로그램 시작 시가 아니라 인쇄 화면에 도달할 때 이제 이 모듈을 로드할 수 있습니다. C++로 모듈을 작성할 수 있는 기능은 여러 플랫폼에서 중복 구현을 줄임으로써 이점을 추가합니다.

코드젠

이 모든 것을 함께 붙이고 두 영역이 호환되도록 하기 위해 React Native 팀은 JS와 Native 측 간의 호환성을 자동화하는 유형 검사기를 구축했습니다. 이 도구를 Codegen이라고 합니다. 모듈식 접근 방식을 사용합니다. 즉, 해당 시스템의 파서를 사용하여 정적으로 유형이 지정된 모든 Javascript 언어를 지원할 수 있습니다. 유형이 지정된 JavaScript를 정보 소스로 사용함으로써 이 생성기는 Fabric 및 TurboModules에 필요한 인터페이스 파일을 정의하여 자신 있게 영역 간에 메시지를 보낼 수 있습니다. Codegen은 또한 컴파일 시간 유형 안전성을 제공합니다. 즉, 두 환경 모두 런타임 검사 없이 명령을 실행할 수 있으므로 코드 크기가 작아지고 실행 속도가 빨라집니다.
이제 우리는 C++ 코드를 가지고 있고 C++는 강력하게 유형화되어 있기 때문에 유형을 정의해야 하고 코드 어디에도 작성할 수 없기 때문에 JS 코드를 강제로 유형화해야 합니다. 그것은 기본적으로 당신을 위한 인터페이스를 생성하고 이제 그것들이 생성되고 C++로 되어 있기 때문에 우리는 이제 기본적으로 전송되는 데이터를 신뢰할 수 있고 우리는 데이터를 확인하기 위해 이리저리 이동할 필요가 없습니다. 이것은 또한 유형 검사를 사용하여 개발 단계에서 치명적인 충돌이나 나쁜 사용자 경험을 초래할 수 있는 문제를 쉽게 식별할 수 있음을 의미합니다.

JSI의 몇 가지 주요 이점

1. Javascript 코드는 모든 네이티브 UI 요소에 대한 참조를 보유하고 그 요소에 대한 메서드를 호출할 수 있습니다(웹의 DOM 조작과 유사).
2. 예를 들어 MMKV 는 Asyncstorage보다 ~30배 빠른 JSI를 사용 하여 성능을 크게 향상시킬 수 있는 네이티브 코드에 대한 빠르고 직접적인 바인딩 입니다.
3. JavaScript Core 이외의 엔진을 사용할 수 있습니다.
4. 네이티브 모듈은 필요할 때 로드할 수 있습니다.
5. JS와 네이티브 코드를 호환 가능하게 만들기 위한 정적 유형 검사.

React Native JSI는 현재 실험적 롤아웃 단계에 있으며 더 많은 프로젝트가 이 변경 사항을 채택함에 따라 새로운 아키텍처의 제한 사항과 영향에 대해 더 많이 알게 될 것입니다. 흥미로운 것 같습니다.