1 つの記事で JSX の原則を理解する (推奨)-jsチュートリアル-php.cn

1 つの記事で JSX の原則を理解する (推奨)

藏色散人

リリース： 2022-01-14 09:04:53

転載

1637 人が閲覧しました

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 の構文を拡張し、JavaScript コードで HTML タグ構造に似た構文を記述できるようにし、より便利になりました。コンパイルプロセスでは、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 要素—> ページの挿入

以上が1 つの記事で JSX の原則を理解する (推奨)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。