一文知晓JSX原理（推荐）-js教程-PHP中文网

一文知晓JSX原理（推荐）

藏色散人

发布： 2022-01-06 15:38:43

转载

1467人浏览过

要明白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>

登录后复制

上面这个HTML所有的信息我们都可以使用JavaScript对象来表示：

{
  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;)
)

登录后复制

转换为

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会构建一个 JavaScript 对象来描述你 HTML 结构的信息，包括标签名、属性、还有子元素等, 语法为

React.createElement(
  type,
  [props],
  [...children]
)

登录后复制

所谓的 JSX 其实就是 JavaScript 对象，所以使用 React 和 JSX 的时候一定要经过编译的过程

JSX — 使用react构造组件，bable进行编译 —> JavaScript对象 — ReactDOM.render() —> DOM元素 —> 插入页面

以上就是一文知晓JSX原理（推荐）的详细内容，更多请关注php中文网其它相关文章！

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

一文知晓JSX原理（推荐）