ReactNative - 자주 사용 하 는 가 져 오기 내 보 내기 방식

React Native 에서 자주 사용 하 는 가 져 오기 내 보 내기 방식 은 주로 세 가지 가 있 습 니 다. require(), import '' 과 @providesModule1 require 방식
CommonJS 에서 지원 합 니 다.
CommonJS 는 nodejs, 즉 서버 에서 광범 위 하 게 사용 되 는 모듈 화 메커니즘 이다.이 규범 의 주요 내용 은 모듈 이 module. exports 를 통 해 대외 변수 나 인 터 페 이 스 를 내 보 내 고 require () 를 통 해 다른 모듈 의 출력 을 현재 모듈 역할 영역 에 가 져 와 야 한 다 는 것 이다.
내 보 내기 방식

변수 내 보 내기

var x = 5;
module.exports.x = x;

내 보 내기 함수

var addX = function (value) {
  return value + x;
};
module.exports.addX = addX;

여러 파일 내 보 내기

module.exports = {
    TripComputation: require('./TripComputation'),
    FlightComputation:require("./FlightComputation"),
};

가 져 오기 방식

var app = require('./app.js');

제한 하 다.require() 가 져 오 는 방식 은 코드 블록 외부, 내부 에서 모두 사용 할 수 있 습 니 다.
2 import 방식
ES6 지원

    ES6             ，             requirejs      。

내 보 내기 내 보 내기

변수 내 보 내기

export var color = "red";
export let name = "cz";
export const age = 25;

내 보 내기 함수

export function add(num1,num2){
    return num1+num2;
}

내 보 내기 클래스

export class Rectangle {
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }
}

대상 내 보 내기

function multiply(num1, num2) {
    return num1 * num2;
}

export {multiply}

내 보 낼 때 이름 바 꾸 기

//     
export color as newColor;

//     
export {multiply as newMultiply}

//    
export Rectangle as NewRectangle

기본 값 내 보 내기

export default function(num1, num2) {
    return num1 + num2;
}

모듈 의 기본 값 은 default 키 워드 를 사용 하여 지정 한 단일 변수, 함수 또는 클래스 입 니 다. 모듈 마다 기본 내 보 내기 만 설정 할 수 있 습 니 다.

function sum(num1, num2) {
    return num1 + num2;
}

export { sum as default };

이름 바 꾸 기 문법 을 사용 하여 기본 값 을 내 보 냅 니 다.
import 가 져 오기

하나 가 져 오기 (변수, 함수, 클래스)

한 파일 이 가 져 온 내용 은 하나의 모듈 에 해당 합 니 다. 이 모듈 에서 변수, 함수 또는 클래스 를 가 져 오 면 한 대상 에서 재 구성 하 는 것 과 같 습 니 다.

import {sum} from './example.js'

여러 개 가 져 오기 (변수, 함수, 클래스)

import {sum, multiply} from './example.js'

전체 모듈 가 져 오기

전체 모듈 을 단일 대상 으로 가 져 옵 니 다. 이 모듈 의 모든 내 보 내기 가 대상 의 속성 으로 존재 합 니 다. 이 가 져 오기 형식 은 네 임 스페이스 가 져 오기 라 고 합 니 다.

import * as example from './example.js';
example.sum(1,2);
example.multiply(2,3);

이름 바 꾸 기 가 져 오기

import { sum as add} from './example.js'

기본 값 가 져 오기

//     
export default function(num1, num2) {
    return num1 + num2;
}

//     ，sum                  ，         
import sum from "./example.js";

//                 
export let color = "red";

export default function(num1, num2) {
    return num1 + num2;
}

//            ，               
import sum,{color} from "./example.js"

가 져 온 재 내 보 내기

현재 모듈 에서 가 져 온 내용 을 다시 가 져 오고 싶 을 때 가 있 습 니 다

//   
import {sum} from './example.js'
……
export {sum}

//   
export {sum} from './example.js'

//      
export { sum as add } from "./example.js";

//       
export * from "./example.js";

사용 제한
export 와 import 는 다른 구문 이나 표현 식 의 외부 에 사용 되 어야 하 며, if 등 코드 블록 내부 에 사용 할 수 없습니다.그 이유 중 하 나 는 모듈 문법 이 JS 가 무엇 을 내 보 내야 하 는 지 정적 으로 판단 할 수 있 도록 해 야 하기 때 문 입 니 다. 이 때문에 모듈 의 최상 위 역할 영역 에서 export 와 import 만 사용 할 수 있 습 니 다.
3 @providesModule
ReactNative 에서 지원 합 니 다.
상기 두 가지 방식 은 가 져 올 때 까지 모두 파일 의 상대 적 인 경 로 를 사용 합 니 다. 만약 에 파일 의 차원 이 비교적 깊 으 면 상대 적 인 경 로 를 쓰 면 잘못 쓰기 쉽 고 읽 을 때 도 식별 하기 쉽 지 않 습 니 다.이에 따라 ReactNative 는 모듈 이름 에 따라 직접 가 져 올 수 있 는 키워드 @providesModule 를 제공 했다.

내 보 내기

파일 의 맨 위 에 여러 줄 의 주석 을 끼 워 넣 고 @ provides Module 을 주석 에 넣 습 니 다.ps: @providesModule 의 여러 줄 주석 이 있 습 니 다. 파일 의 첫 번 째 여러 줄 주석 이 어야 합 니 다.

/**
 * @providesModule CommonComponent
 */

import {
    Dimensions
} from 'react-native';

export default class Common {
...
}

가 져 오기

//       
// import CommonComponent from './../Common/CommonComponent'

//          
import CommonComponent from 'CommonComponent'

제한 하 다.
RN 과 같은 환경 에서 만 사용 할 수 있 고 전단 의 항목 에 사용 할 수 없습니다.
결함.

이름 이 중복 되 기 쉬 우 므 로 개발 자 규칙 의 이름 규칙 이 필요 합 니 다. 예 를 들 어 접두사, 접 두 사 를 추가 하 는 것 입 니 다.

모듈 을 도입 하 는 경로 에 따라 파일 을 찾 을 수 없고 모듈 이름 에 따라 전체 텍스트 를 검색 할 수 있 습 니 다.

의 원리
RN 은 스 크 립 트 를 포장 할 때 이 유형의 파일 을 감지 하고, 전체 항목 파일 에서 해당 하 는 파일 을 찾 아 해당 하 는 모듈 코드 로 바 꿉 니 다.패 키 지 는 가 져 오 는 상대 경로 와 같 습 니 다.
4 확장
파일 경로
이상 의 가 져 오기 방식 은 모두 파일 경 로 를 사용 하여 파일 을 가 져 옵 니 다. 파일 경로 의 사용 방식 은 다음 과 같 습 니 다.

루트 디 렉 터 리 부터 해석 하 는 것 을 / 로 시작 합 니 다.

. / 를 시작 으로 현재 디 렉 터 리 부터 분석 하 는 것 을 표시 합 니 다.

.. / 를 시작 으로 상급 디 렉 터 리 부터 해석 하 는 것 을 나타 낸다.

참고:
https://blog.csdn.net/crystal6918/article/details/74906757/ https://segmentfault.com/a/1190000004593603 https://www.jianshu.com/p/810abc8792be