React Native 앱 성능 개선

나는 훌륭한 작가도 아니고 내 생각을 말로 표현하는 데 있어서도 확실히 좋지 않습니다. 이것은 내 첫 번째 게시물이므로 달콤하고 짧게 유지하겠습니다.




React Native는 모바일(실제로는 크로스 플랫폼) 앱을 빠르게 빌드하기 위한 훌륭한 프레임워크이지만 JavaScript 특성으로 인해 느리다는 평판이 있습니다.

솔직히 말해서 잘 작성된 React Native 앱은 잘 작성된 기본 앱과 구별할 수 없습니다.

많은 사람들이 성능 문제가 React 및 네이티브 뷰 통합에 뿌리를 두고 있다고 예상하지만 대부분의 경우 문제는 실제로 React 측에만 있습니다.

뒷이야기와 약간의 설명

저는 수십 개의 뷰가 포함된 앱에서 작업 중이며 JS 스레드에서 반복되는 성능 병목 현상 중 하나는 항상 Redux 스토어 업데이트와 관련이 있습니다.

이것은 웹에서 잘 눈에 띄는 문제가 아닙니다. 사용자가 페이지를 전환하면 해당 구성 요소도 함께 사라집니다.

그러나 모바일에서는 앱이 보기 계층 구조를 유지해야 합니다. 새 화면이 탐색 스택에 푸시되면 해당 구성 요소가 있는 이전 화면도 활성 상태로 유지됩니다.

이러한 구성 요소는 스택 계층 아래에 ​​숨겨져 있으며 최종 사용자에게는 보이지 않지만 여전히 추가 리소스를 차지하며 구성 요소가 변경 사항을 구독했다고 Redux 상태가 될 때마다 업데이트/다시 렌더링됩니다.

우리는 무엇을해야합니까?

react-navigation는 useIsFocused라는 후크를 제공하여 구성 요소가 화면의 현재 포커스 상태에 따라 다른 콘텐츠를 렌더링할 수 있도록 합니다.

이를 사용하여 화면에 초점이 있을 때만 새로운 선택 상태를 반환하는 Redux용 자체useSelector 후크를 만들 수 있습니다.

import { useRef } from 'react';
import { useIsFocused } from '@react-navigation/core';
import { useSelector } from 'react-redux';

const undefinedRef = Symbol();

export function useAppSelector<Selected = unknown>(
  selector: (state: RootState) => Selected,
  ignoreUnfocusedScreens: boolean = true,
  equalityFn?: (left: Selected, right: Selected) => boolean,
) {
  const memoizedSelectorResult = useRef<Selected | Symbol>(undefinedRef);
  const isScreenFocused = useIsFocused();

  return useSelector((state: RootState) => {
    if (
      memoizedSelectorResult.current === undefinedRef ||
      !ignoreUnfocusedScreens ||
      isScreenFocused
    ) {
      memoizedSelectorResult.current = selector(state);
    }
    return memoizedSelectorResult.current as Selected;
  }, equalityFn);
}

그게 다야! 🎉

수학도, 통계도 없습니다. "당신의 프로젝트에 이 20개의 LoC를 채택하는 것만으로 500%의 성능 향상을 얻을 수 있습니다"와 같은 잘못된 주장을 하여 당신을 놀라게 하지는 않겠습니다. 하지만 직접 구현한 후에 저는 깨달았습니다. "무거운"비활성 화면의 불필요한 재렌더링을 차단하여 JS 스레드 성능이 크게 향상되었습니다.

마무리 노트

솔직히, 나는 이 문제가 마땅히 있어야 할 만큼 자주 언급되지 않는다는 사실에 매우 놀랐습니다. 적어도 나는 이 특정 사례에 대한 기사를 찾지 못했습니다. 나는 시도했다.

내 솔루션이 복잡한 모바일 앱에서 Redux로 작업할 때 앞으로 나아가는 방법이 되어야 한다고 생각하지 않지만 다행스럽게도 Software Mansion에 있는 사람들이 실제로 이 문제를 해결하기 위해 있습니다doing something even better.

관심을 가져 주셔서 감사합니다.