반응 요소는 무엇을 의미합니까?

react 요소는 "React.createElement" 함수의 반환 값입니다. 즉, ReactElement의 구조는 "const element = {Element $$typeof: REACT_ELEMENT_TYPE,key: key,ref: ref,props: props"입니다. ,_owner: 소유자, };".

이 튜토리얼의 운영 환경: Windows 10 시스템, React16.9.0 버전, Dell G3 컴퓨터.

반응 요소는 무엇을 의미하나요?

React 소스 코드 | ReactElement

ReactElement라고 하면, React에서 JavaScript(JS)를 대체하는 언어, JSX를 언급해야 합니다.

JSX

React의 공식 지정된 구문인 JSX를 사용하면 사용자는 JS 코드에 HTML 코드를 삽입할 수 있습니다. 그러나 이러한 작성 방식은 브라우저에서 구문 분석할 수 없습니다. 변환기가 필요하며, Babel은 JSX 코드가 컴파일될 때 이를 JS 파일로 변환하여 브라우저가 이를 구문 분석할 수 있도록 하는 역할을 합니다.

어떻게 변환하나요? JSX에는 JS와 HTML의 두 가지 작성 방법이 있다는 것을 알고 있습니다. JS로 작성하면 변환할 필요가 없습니다. 물론 Babel이 더 높은 버전을 변환한다고 말할 수는 없습니다. 호환성을 위해 구문은 하위 버전으로 번역되므로 이 부분은 논의 범위를 벗어납니다. 우리가 주목해야 할 것은 실제로 HTML이 처리되는 방식입니다.

예를 들어 다음 코드 줄은:

<div>Tom and Jerry</div>

Babel로 변환한 후 생성된 코드는 다음과 같습니다.

React.createElement("div", {
    id: "name"}, "Tom and Jerry");

HTML 구문은 간단히 말해서 JS 구문으로 변환됩니다. .

더 복잡한 예를 작성해 보겠습니다.

<div>
    <span>Tom</span>
    <span>Jerry</span>
</div>React.createElement("div", {
    class: "wrapper",
    id: "id_wrapper"
}, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));

React.createElement의 첫 번째 매개변수는 노드 유형이고, 두 번째 매개변수는 키: 값 형식의 노드 속성입니다. 객체로서 모든 후속 매개변수는 이 노드의 하위 노드입니다.

JSX 구문에는 기본 HTML 노드뿐만 아니라 다음과 같은 수많은 사용자 정의 구성 요소도 있다는 점에 유의해야 합니다.

function Comp() {
    return '<div>Tom and Jerry</div>'
}


function Comp() {
    return '<div>Tom and Jerry</div>';
}

React.createElement(Comp, null);

React.createElement의 첫 번째 매개 변수가 A가 되는 것을 볼 수 있습니다. 변수에서 문자열 대신 Comp 함수의 첫 글자를 소문자로 사용해 보세요.

function comp() {
    return '<div>Tom and Jerry</div>'
}


function comp() {
    return '<div>Tom and Jerry</div>';
}

React.createElement("comp", null);

React.createElement의 첫 번째 매개변수가 다시 문자열이 됩니다.
이것이 바로 React에서 컴포넌트를 작성할 때 첫 글자를 대문자로 작성해야 하는 이유입니다. 컴파일할 때 Babel은 처리를 위해 소문자 첫 글자가 있는 컴포넌트를 기본 HTML 노드로 처리합니다. 문자가 소문자인 경우 후속 프로그램은 이 구성요소를 인식할 수 없으며 결국 오류를 보고하게 됩니다.

ReactElement

Babel로 컴파일한 JS 코드에는 React.createElement 함수가 자주 등장합니다. 이 함수의 반환 값은 ReactElement입니다. 위의 예에서 볼 수 있듯이 React.createElement 함수에는 3개의 입력 매개변수, 즉 3개의 카테고리가 있습니다.

• type
  type은 이 ReactElement의 유형을 나타냅니다. ㅋㅋㅋ
  

  기본적으로 제공되는 Fragment, AsyncMode 등은 Symbol이며 특별히 처리됩니다

• config

  위 Babel로 컴파일한 코드를 참고하면 모든 노드의 속성이 config에 배치됩니다. 개체의 키:값 형식입니다.
children
• 자식 노드가 두 개 이상 있으므로 두 번째 매개 변수 이후의 모든 매개 변수는 자식 노드이며 배열입니다.

ReactElement의 구조는 이렇습니다

const element = {
    // This tag allows us to uniquely identify this as a React Element    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.    _owner: owner,
  };

이 객체의 생성 규칙을 명확하게 보기 위해 예를 들어보겠습니다. 첫 번째는 우리가 작성한 JSX입니다.

• <div>
      <span>Tom</span>
      <span>Jerry</span>
  </div>

  
  
  Babel에 의해 다음과 같이 컴파일됩니다.

React.createElement("div", {
    class: "class_name",
    id: "id_name",
    key: "key_name",
    ref: "ref_name"}, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));

이러한 요소가 생성됩니다

{
    $$typeof: REACT_ELEMENT_TYPE,
    type：'div'，
    key: 'key_name',
    ref: "ref_name",
    props: {
        class: "class_name",
        id: "id_name",
        children: [
            React.createElement("span", null, "Tom"),
            React.createElement("span", null, "Jerry")
        ]
    }
     _owner: ReactCurrentOwner.current,}

• $$typeof는 상수이며 React.createElement에 의해 생성된 모든 요소는 이 값을 갖습니다. 일반적으로 React를 사용하는 컴포넌트는 상위 컴포넌트의 this.props.children에 매달리지만 예외가 있습니다. 예를 들어 모달 박스를 구현하려면 이 경우 body 노드 아래에 모달 박스를 마운트해야 합니다. , ReactDOM을 사용해야 합니다. 이 함수에 의해 생성된 $$typeof 값은 REACT_PORTAL_TYPE입니다.
  

• type은 이 ReactElement의 유형을 나타냅니다.
  

• key와 ref는 구성 객체에서 발견되는 특수 구성입니다. 이들은 별도로 추출되어 ReactElement
  

• props에 두 개가 포함되어 있습니다. 키와 참조가 제거된 구성이고 두 번째 부분은 자식 배열입니다. 배열의 멤버도 React.createElement를 통해 생성된 객체입니다. 이 단계는 예제에서 생략되었습니다.
  

• _owner는 버전 16.7의 Fiber입니다. Fiber는 React16+ 버전의 핵심이므로 지금은 자세히 설명하지 않겠습니다.
  

이 기사를 통해 우리는 JSX의 HTML 노드가 Babel의 도움으로 중첩된 ReactElement 객체로 변환된다는 것을 배웠습니다. 이 정보는 나중에 애플리케이션의 트리 구조를 구축하는 데 매우 중요하며 React는 이러한 유형의 노드를 제공합니다. 데이터, 플랫폼의 한계에서 벗어나세요.

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응 요소는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!