JSX.Element 대 ReactElement 대 ReactNode

이 세 가지 유형은 일반적으로 초보 React 개발자를 혼란스럽게 합니다. 이름만 다를 뿐 같은 물건인 것 같습니다.
그러나 그것은 아주 옳지 않습니다.

JSX.Element 대 ReactElement

두 유형 모두 React.createElement()/jsx() 함수 호출의 결과입니다.

둘 다 다음을 가진 객체입니다.

유형

소품

키

ref, $$typeof 등과 같은 몇 가지 다른 "숨겨진"속성

반응요소

ReactElement 타입이 가장 기본입니다. 심지어 흐름을 사용하여 정의되었습니다in React source code!

// ./packages/shared/ReactElementType.js

export type ReactElement = {|
  $$typeof: any,
  type: any,
  key: any,
  ref: any,
  props: any,
  // ReactFiber
  _owner: any,

  // __DEV__
  _store: {validated: boolean, ...},
  _self: React$Element<any>,
  _shadowChildren: any,
  _source: Source,
|};

이 유형도 정의됩니다in DefinitelyTyped package.

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
  type: T;
  props: P;
  key: Key | null;
}

JSX.요소

더 일반적인 유형입니다. The key difference is that props and type are typed as any in JSX.Element .

declare global {
  namespace JSX {
    interface Element extends React.ReactElement<any, any> { }
    // ...
  }
}   

이것은 다양한 라이브러리가 JSX를 구현하는 방법에 유연성을 제공합니다.
예를 들어, Preact has its own implementation with different API .

반응노드

ReactNode 유형이 다릅니다. React.createElement()/jsx() 함수 호출의 반환 값이 아닙니다.

const Component = () => {
  // Here it's ReactElement
  return <div>Hello world!</div>
}

// Here it's ReactNode
const Example = Component();

React 노드 자체는 가상 DOM을 나타냅니다. 따라서 ReactNode는 구성 요소의 가능한 모든 반환 값 집합입니다.

type ReactChild = ReactElement | ReactText;

type ReactFragment = {} | Iterable<ReactNode>;

interface ReactPortal extends ReactElement {
  key: Key | null;
  children: ReactNode;
}

type ReactNode =
  | ReactChild
  | ReactFragment
  | ReactPortal
  | boolean
  | null
  | undefined;

아이들을 위해 무엇을 사용합니까?

일반적으로 ReactNode는 children 소품을 입력하는 올바른 방법입니다. 적절한 유형 검사를 유지하면서 최대한의 유연성을 제공합니다.

그러나 ReactFragment는 {} 유형을 허용하기 때문에 주의해야 합니다.

const Item = ({ children }: { children: ReactNode }) => {
  return <li>{children}</li>;
}

const App = () => {
  return (
    <ul>
      // Run-time error here, objects are not valid children!
      <Item>{{}}</Item>
    </ul>
  );
}

추신 이와 같은 더 많은 콘텐츠를 위해!









닉 | 리액트 팅커러 ⚛️









최고에게 배우세요! JavaScript에서 팩토리 패턴은 어디에 사용됩니까?JS는 다중 패러다임 프로그래밍 언어이므로 동일한 문제를 처리하는 다양한 방법을 제공합니다.👇


오후 18:09 - 2022년 2월 7일