"'react'에서 React로 *를 가져오는 것과 'react'에서 React를 가져오는 것의 유사점과 차이점;"

Question

React를 다음과 같이 가져올 수 있다는 것을 확인했습니다.

import *를 'react'에서 React로 가져옵니다.

...또는 다음과 같이 가져옵니다.

'react'에서 React 가져오기;

<시간 />

첫 번째 방법은 react 모듈의 모든 콘텐츠를 가져옵니다(참조: 전체 모듈의 콘텐츠 가져오기)

두 번째 방법은 기본 모듈 내보내기만 가져옵니다(참조: 기본 내보내기 가져오기)

<시간 />

두 가지 접근 방식은 서로 다르며 근본적으로 호환되지 않는 것으로 보입니다.

왜 모두 작동하나요?

<시간 />

소스 코드를 참조하여 메커니즘을 설명해주세요... 이것이 어떻게 작동하는지 이해하고 싶습니다.

<시간 />

업데이트

이것은 중복된 질문이 아니며 "'react'에서 반응으로 import *와 'react'에서 반응을 가져오는 것의 차이점"과 다릅니다.

그 질문에 대한 답변은 일반적인 ES6 모듈 정보입니다.

react 모듈이 이런 방식으로 작동할 수 있게 하는 메커니즘에 대해 질문드립니다. 이는 소스 코드의 "해키" 내보내기 메커니즘과 관련이 있는 것으로 보이지만 전체 모듈을 가져오는 방법과 기본 내보내기를 React JSX 등을 트랜스파일하여

Answer 1

Yours tsconfig.json 文件中很可能设置了 "allowSyntheticDefaultImports": true,，这实际上让编译器对它认为无效的默认导入保持静默。Typescript 添加了 esModuleInterop 이는 기본적으로 모듈 로딩 측면에서 babel이 수행하는 것과 동일합니다.

이를 통해 가져온 소스 코드에 기본 내보내기가 없을 때 ES6 기본 가져오기를 사용할 수 있습니다.

Typescript는 이와 관련하여 엄격하므로(규칙을 따릅니다) import * as React from 'react'를 사용해야 합니다. 또는 합성 기본 가져오기를 허용하려면 기본 구성에서 이를 알려야 합니다.

관련 정보 더보기

Answer 2

TL;DR

사실 ES의 import 문import default和import *并不是同一回事，它们在这种情况下表现相同是因为React作者选择以这种方式发布库并在TypeScript（使用esModuleInterop)이나 Babel과 패키징 도구에 사용되는 호환성 레이어를 사용하면 "그냥 작동"하게 됩니다. ES6 사양에 따르면 제대로 작동하지 않을 수도 있지만 오늘날 우리는 여전히 JS 모듈 혼란 시대에 있으므로 Babel, TypeScript, Webpack 등과 같은 도구는 모두 동작을 표준화하려고 합니다.

자세한 내용:

React는 ES6 라이브러리가 아닙니다. 소스 코드 를 보면 index.js에서 다음을 볼 수 있습니다:

으아아아

(React 소스 코드에서도 ES6 기본 내보내기와의 호환성 문제를 해결하기 위해 노력하고 있습니다.)

module.exports = 구문은 CommonJS(NodeJS)의 구문입니다. 브라우저는 이 구문을 이해할 수 없습니다. 이것이 바로 우리가 Webpack, Rollup 또는 Parcel과 같은 패키징 도구를 사용하는 이유입니다. 다양한 모듈 구문을 이해하고 브라우저에서 작동하는 번들 파일을 생성합니다.

그러나 React는 ES 라이브러리가 아니더라도 TypeScript와 Babel 모두 ES 라이브러리처럼 가져올 수 있습니다(이 옵션은 Using import语法，而不是require()等），但是CJS和ES之间存在一些需要解决的差异。其中之一是export =可以为你提供ES没有规范兼容的导入方式，比如将函数或类作为模块导入。为了解决这些不兼容性问题，Babel允许你以默认方式导入CJS模块，或者以命名空间方式导入。TypeScript以前不支持这样做，但是最近在esModuleInterop에 추가되었습니다). 따라서 이제 Babel과 TypeScript 모두 기본 또는 네임스페이스 사용을 상당히 일관되게 허용합니다. ES 가져오기 - CJS 모듈 가져오기

.

TypeScript의 경우 라이브러리의 유형 정의가 정의되는 방식에 따라 달라집니다. 자세히 설명하지는 않겠지만, 트랜스파일러와 패키징 도구로 인해 특정 가져오기가 런타임에 제대로 작동하지만 TypeScript가 컴파일 타임에 오류를 발생시키는 경우가 있다고 상상할 수 있습니다.

또 언급할 만한 점은 React의 빌드 코드를 보면 CJS 버전뿐만 아니라 UMD 모듈 버전도 있다는 것입니다. UMD 버전에는 브라우저를 포함한 모든 모듈 환경에서 제대로 작동하도록 하는 복잡한 런타임 코드가 포함되어 있습니다. 주로 런타임에 React만 포함될 때(즉, 패키징 도구를 사용하지 않는 경우) 사용하기 위한 것입니다. 예.

헷갈리시나요? 그래요. 저도 그렇게 생각 해요. :)