한 글로 JSX 원칙을 알아보세요(권장)

藏色散人
풀어 주다: 2022-01-14 09:04:53
앞으로
1636명이 탐색했습니다.

JSX의 원리를 이해하려면 먼저 JavaScript 개체를 사용하여 DOM 요소의 구조를 표현하는 방법을 이해해야 합니다.
아래 DOM 구조를 보세요:

<div class=&#39;app&#39; id=&#39;appRoot&#39;>
  <h1 class=&#39;title&#39;>欢迎进入React的世界</h1>
  <p>
    React.js 是一个帮助你构建页面 UI 的库
  </p>
</div>
로그인 후 복사

JavaScript 객체를 사용하여 위 HTML의 모든 정보를 표현할 수 있습니다:

{
  tag: &#39;p&#39;,
  attrs: { className: &#39;app&#39;, id: &#39;appRoot&#39;},
  children: [
    {
      tag: &#39;h1&#39;,
      attrs: { className: &#39;title&#39; },
      children: [&#39;欢迎进入React的世界&#39;]
    },
    {
      tag: &#39;p&#39;,
      attrs: null,
      children: [&#39;React.js 是一个构建页面 UI 的库&#39;]
    }
  ]
}
로그인 후 복사

하지만 JavaScript로 작성하기에는 너무 길고 구조가 명확하지 않습니다. HTML은 매우 복잡합니다.
그래서 React.js는 JavaScript 코드에서 HTML 태그 구조와 유사한 구문을 작성할 수 있도록 JavaScript 구문을 확장했습니다. 이는 컴파일 프로세스에서 HTML과 유사한 JSX 구조를 JavaScript의 객체 구조로 변환합니다.

import React from &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;

class App extends React.Component {
  render () {
    return (
      <p className=&#39;app&#39; id=&#39;appRoot&#39;>
        <h1 className=&#39;title&#39;>欢迎进入React的世界</h1>
        <p>
          React.js 是一个构建页面 UI 的库
        </p>
      </p>
    )
  }
}

ReactDOM.render(
    <App />,
  document.getElementById(&#39;root&#39;)
)
로그인 후 복사

Convert to

import React from &#39;react&#39;
import ReactDOM from &#39;react-dom&#39;

class App extends React.Component {
  render () {
    return (
      React.createElement(
        "p",
        {
          className: &#39;app&#39;,
          id: &#39;appRoot&#39;
        },
        React.createElement(
          "h1",
          { className: &#39;title&#39; },
          "欢迎进入React的世界"
        ),
        React.createElement(
          "p",
          null,
          "React.js 是一个构建页面 UI 的库"
        )
      )
    )
  }
}

ReactDOM.render(
    React.createElement(App),
  document.getElementById(&#39;root&#39;)
)
로그인 후 복사

React.createElement는 태그 이름, 속성, 하위 요소 등을 포함하여 HTML 구조의 정보를 설명하는 JavaScript 객체를 구축합니다. 구문은

React.createElement(
  type,
  [props],
  [...children]
)
로그인 후 복사

소위 JSX는 실제로 JavaScript 개체이므로 React 및 JSX를 사용할 때는 컴파일 과정을 거쳐야 합니다

JSX — React를 사용하여 구성 요소를 구성하고 babel로 컴파일 —> JavaScript 개체 — ReactDOM.render() —> DOM 요소 —> 페이지에 삽입

추천 학습: " js 기본 튜토리얼

위 내용은 한 글로 JSX 원칙을 알아보세요(권장)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
jsx
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿