( )=>반응의 차이는 무엇입니까?FC 및 ( )=>JSX.요소

( )=>반응의 차이는 무엇입니까?FC 및 ( )=>JSX.요소

React에서는 함수 구성요소를 선언하거나 함수만 JSX 요소를 반환할 수 있습니다.저를 혼란스럽게 하는 것은 이 두 접근법의 핵심적인 차이점을 모른다는 것입니다.하나의 접근 방식만 할 수 있는 반면 다른 접근 방식은 할 수 없는 것이 있습니까?

import React from "react";

type ItemProps = {
    id: number
    name: string
}

const Item: React.FC<ItemProps> = ({ id, name }) =>
    (
        <section>
            my id is {id}
            my name is {name}
        </section>
    )

const item = ({ id, name }: ItemProps) =>
    (
        <section>
            my id is {id}
            my name is {name}
        </section>
    )

export const Container = () =>
    (
        <section>
            {item({ id: 1, name: "item-1" })}
            <Item id={1} name={"item-1"} />
        </section>
    )

차이점 요약:

React.FC:

• 함축성이 있습니다.childrenprop. 즉, 구성 요소가 어린이를 허용하지 않더라도 사용 중인 경우 타자 스크립트가 불만을 제기하지 않습니다.React.FC부모는 아이들을 지나칩니다.이는 런타임에 영향을 미치지 않지만 하위 소품에 대해 더 명확하게 설명하는 것이 좋습니다.이것은 다음 버전에서 사라질 수 있습니다.React.FC지금도 당신은 사용할 수 있습니다.React.VFC
• defaultProps에서 잘 작동하지 않음
• 제네릭을 허용하지 않습니다.
• 함수 선언에 주석을 다는 데 사용할 수 없습니다. 함수 식만 사용합니다.
• 네임스페이스로서의 구성요소 패턴을 입력하기 어렵게 합니다.

JSX.element + 소품 인터페이스

• 은(는) 암시적 자식 프로퍼가 없으므로 명시적으로 선언해야 하며, 이는 양호하며, 어떤 사람들은 어쨌든 암시적 반환 유형을 선호합니다.다음과 같은 다른/정적 속성은 기본적으로 지원되지 않습니다.propTypes,displayName필요한 경우 명시적으로 추가해야 합니다.
• 기본 특성은 신경쓰지 않습니다. 이것은 인수 및 반환 유형에 대한 일반 함수 타이핑입니다.
• 제네릭과 함께 사용할 수 있습니다.
• 함수 선언과 식에 주석을 달 때 사용할 수 있습니다.

자원.

• https://typescript-cheatsheet.netlify.app/cats/basic/getting-cats/function_components/
• https://fettblog.eu/typescript-react-why-i-dont-use-react-fc/
• https://github.com/facebook/create-react-app/pull/8177

React.FC유형 검사 지원 제공

React를 사용하여 구성 요소를 작성할 수도 있습니다.Function Component(또는 React(반응)의 약자).FC - 동일):

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

일반 기능 버전과의 몇 가지 차이점:

• React.FunctionComponent는 반환 형식에 대해 명시적인 반면 일반 함수 버전은 암시적입니다(또는 추가 주석이 필요합니다).
• displayName과 같은 에 대한 유형 및 기능을 합니다.
  • defaultProp을 사용하는 몇 가지 알려진 문제가 있습니다.
    React.FunctionComponent.자세한 내용은 이 문제를 참조하십시오.우리는 유지합니다.
    별도의 defaultProps 섹션을 검색할 수도 있습니다.
• 아동에 대한 암묵적인 정의를 제공합니다.

자세한 내용은 문서를 참조하십시오.

https://github.com/typescript-cheatsheets/react/blob/main/README.md#section-2-getting-started

은 반에서함반환다은같음습다니과수입니다.JSX.Element심지어 선언문의 반환도.React.FC .JSX.Element

암묵적인 반환이 있는 경우:

const Component: React.FC = () => {}

명시적인 반품이 있는 경우

const Component = (): JSX.Element => {}

이 두 접근법의 차이는 여기에 문서화되어 있습니다.

유형 검사 및 자동 완성 기능을 제공합니다.

언급URL : https://stackoverflow.com/questions/58656026/what-is-the-difference-between-react-fc-and-jsx-element