네이티브 인터뷰 질문에 반응

2447 단어 reactnativejavascript

How to build Custom Native Modules?


  • ReactContextBaseJavaModule을 확장하는 모듈 클래스 생성
  • @ReactMethod로 주석이 달린 내보내기 모듈 이름 및 함수
  • MainPackage 파일에서 새로 만든 모듈을 모듈 목록에 추가합니다.
  • JS 파일의 react-native 패키지에서 NativeModule을 가져옵니다.
  • 추가 정보 here

  • How to build Custom Native UI Components?


  • ViewManager 하위 클래스 생성
  • @ReactProps로 주석이 달린 속성 노출
  • ViewManager 클래스 등록
  • 뷰 클래스 생성
  • 추가 정보 here

  • Number of threads in React Native?


  • 비즈니스 로직, API 호출, 터치 이벤트를 처리하는 Javascript 스레드
  • 네이티브 로직을 처리하는 메인 스레드

  • What are common Performance bottleneck or issues?


  • ListView 또는 FlatList 대신 큰 ScrollView 사용
  • UI 변경 없이 불필요하게 렌더링됨
  • 키의 부적절한 사용. 더 읽어보기
  • 무거운 애니메이션(애니메이션은 Javascript 스레드에서 계산됨). useNativeDriver를 true로 사용하여 기본 API를 사용하고 계산을 기본 스레드로 이동합니다
  • .

    How to Improve Performance?


  • 헤르메스 엔진 사용
  • 비싸거나 큰 모듈에 인라인 요구 사용
    예를 들면 :

  • let VeryExpensive = null;
    const Home = () => {
        const onClickHandler = () => {
            if (VeryExpensive == null) {
                VeryExpensive = require('./VeryExpensive').default;
            }
        }
    }
    


    What is hermes?


  • React Native에 최적화된 Opensource JS 엔진
  • 앱 시작 시간 개선, 메모리 사용량 감소, 앱 크기 축소에 도움
  • 추가 정보 here

  • What is Turbomodules?


  • 네이티브 모듈 시스템의 재구성
  • React Native 브리지 없이 JS와 Native 간의 보다 효율적인 유형 안전 통신을 촉진하는 데 도움이 됩니다
  • .

    How to Animated stuff?


  • 입력과 출력 간의 선언적 애니메이션에 inbuild Animated api를 사용하십시오
  • .
  • 다음 렌더링 주기에서 모든 애니메이션 보기에 대해 LayoutAnimation API를 사용하십시오. 주로 flexbox 레이아웃 업데이트에 사용됨
  • 좋은 웹페이지 즐겨찾기