TS 구성 JSX: 대응JSX 대 반응

TS 구성 JSX: 대응JSX 대 반응

React와 함께 Typescript를 사용하는 동안 지정해야 합니다.jsx에compilerOptions에tsconfig.json파일.

정말 그랬어요.preserve,react,react-native,react-jsx등을 허용 값으로 지정합니다.

{
  "compilerOptions": {
    "jsx": "react-jsx" | "react" | "react-native" | "preserve"
  }
}

react그리고.react-jsx대부분 웹에 사용됩니다. 두 옵션의 차이와 어떤 옵션을 선택해야 하는지 이해하고 싶습니다.

reactjsx를 로 변환합니다.React.createElement()

react-jsxjsx를 로 변환합니다._jsx()그리고._jsxs()

또한 사이의 차이점은 무엇입니까?_jsx()그리고._jsxs()?

사용하는 것이 좋습니다.react-jsx아래 설명:

둘 사이의 차이

먼저 이 옵션은 JSX 구성이 JavaScript 파일에서 방출되는 방식만 제어합니다.이 문제는 .tsx 파일에서 시작된 JS 파일의 출력에만 영향을 미칩니다.

따라서 두 가지 차이점은 JS 파일의 출력일 뿐입니다.

Typescript 문서에서 JS 파일 출력:

기본값: "반응"

import React from 'react';
export const HelloWorld = () => React.createElement("h1", null, "Hello world");

반응 17 변환: "반응-jsx"

import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
export const HelloWorld = () => _jsx("h1", { children: "Hello world" });

어느 것이 더 좋습니까?

대응 문서에 기술되어 있듯이, 실용적인 용어로 "대응" 옵션은 JSX를 완벽하지 않은 일반 자바스크립트로 변환하는 오래된 방법일 뿐입니다.

• JSX가 React.createElement로 컴파일되었기 때문에 JSX를 사용하는 경우 React가 범위 내에 있어야 했습니다.
• React.createElement에서 허용하지 않는 몇 가지 성능 향상 및 단순화가 있습니다.

이러한 문제를 해결하기 위해 React 17은 Babel 및 TypeScript와 같은 컴파일러에서만 사용할 수 있는 React 패키지에 새로운 진입점을 도입합니다.

"react-jsx" 옵션을 사용하는 경우 이 새로운 React 17 컴파일을 사용하는 것입니다.

따라서 "react-jsx" 옵션을 사용하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/67776707/ts-config-jsx-reactjsx-vs-react