React 네이티브 앱 “부스트 업”

React Native는 항상 모바일 개발자들 사이에서 각광을 받았습니다. 그리고 너무 자주 네이티브 애플리케이션의 모양, 느낌 및 성능과 비교합니다. 그래서 몇 달 동안 React Native를 사용해 본 후 앱 성능을 높이는 데 도움이 될 몇 가지 사항을 확인했습니다.

재사용 가능한 구성 요소 만들기

작은 독립적 인 재사용 가능한 구성 요소는 항상 작업을 훨씬 더 쉽게 만들어줍니다. 더 독립적 인 구성 요소는 더 많이 재사용 할 수 있습니다.

CSS 재사용, StyleSheet 사용

JS 코드에서 m CSS를 분리하고 구성 요소의 스타일을 재사용합니다. 스타일 개체에서 스타일 시트를 만들면 매번 새 스타일 개체를 만드는 대신 ID로 참조 할 수 있습니다. 또한 코드를보기 좋게 만듭니다.

Console.log () 사용 안함

코드에서 console.log 문을 모두 제거해야합니다. 콘솔 문은 코드 성능에 영향을줍니다.

린터 사용

린 터는 성 가실 수 있지만 일찍 승선하면 그리 나쁘지 않습니다. 실제로 오류를 일으키지 않는 어리석은 잘못된 일을 많이하는 것을 방지합니다.

인라인 선언 방지

대부분 우리는 인라인 콜백 함수, 객체, 배열 등을 선언합니다. 이로 인해 메모리에서 이러한 엔티티가 반복적으로 재현되며 실제로 UI 속도가 눈에 띄게 느려지는 것처럼 보입니다. 항상 이러한 항목을 별도로 만들고 필요할 때마다 참조를 사용하세요.

유연성 장려

Flex를 사용하여 애플리케이션의 레이아웃을 디자인하십시오. React Native의 flex-box 지원은 세 가지 다른 엔진을 배우는 대신 Android, iOS 및 웹에 똑같은 레이아웃 코드를 사용할 수 있음을 의미합니다.

Android를위한 특별 관리

Text / TextInput 요소의 여백 및 패딩은 Android에서 어느 정도 작동하지 않으므로 실제로 피하십시오. 또한 Android에서 일부 반응 기본 구성 요소의 예상치 못한 동작을 발견 할 수 있습니다.

조건부 연산자 대신 논리 연산자 권장

논리 연산자를 사용하면 많은 시간이 단축되고 구성 요소의 성능과 렌더링이 크게 향상됩니다.

배열 대신 객체 사용

객체는 애플리케이션의 성능을 향상시키는 데 매우 중요한 역할을합니다. 객체 형태로 저장된 데이터를 한 번에 생성 / 업데이트 / 삭제할 수 있습니다. 데이터 생성 / 업데이트 / 삭제를 위해 어레이를 순회하지 마십시오.

상태 비 저장 기능 구성 요소 권장

내부 상태가없는 구성 요소를 사용하는 것이 좋습니다.

불필요한 다시 렌더링 방지

항상 구성 요소가 다시 렌더링되는 빈도를 확인합니다. 귀하의 주를 책임감있게 유지하십시오. 상태 업데이트가 많으면 애플리케이션 성능이 크게 저하 될 수 있습니다.

Redux 이해

Redux, 단방향 데이터 흐름을 사용하여 단일 불변 상태 트리에서 전체 애플리케이션의 상태를 유지하는 상태 관리 계층입니다. Redux의 장점은 다음과 같습니다. 결과 예측 가능성, 유지 보수 가능성, 체계화 된 코드, 테스트 용이성 등

타사 라이브러리 권장

당신은 코드를 효율적이고 최적으로 만들기 위해 정말 열심히 일하고 있으며, 타사 라이브러리가 코드를 망칠 수도 있습니다. 항상 그런 것은 아니지만 내부에서 작동하는 방식을 확인합니다.

그게 다입니다!

이 기사를 읽어 주셔서 감사합니다.이 기사가 도움이된다면 공유하고 👏하십시오.