首页 >web前端 >js教程 > 正文

一文知晓JSX原理(推荐)

转载2022-01-14 09:04:530371

要明白JSX的原理,需要先明白如何使用JavaScript对象来表现一个DOM元素的结构。
看下面的DOM结构:

<div class='app' id='appRoot'>
  <h1 class='title'>欢迎进入React的世界</h1>
  <p>
    React.js 是一个帮助你构建页面 UI 的库
  </p>
</div>

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

{
  tag: 'p',
  attrs: { className: 'app', id: 'appRoot'},
  children: [
    {
      tag: 'h1',
      attrs: { className: 'title' },
      children: ['欢迎进入React的世界']
    },
    {
      tag: 'p',
      attrs: null,
      children: ['React.js 是一个构建页面 UI 的库']
    }
  ]
}

但是这样用JavaScript写起来太长了,而且结构也不清晰,使用HTML的方式就很方便。
于是React.js就把JavaScript的语法扩展了一下,允许在JavaScript代码中编写类似HTML标签结构的语法,这样就方便多了,编译的过程会把类似HTML的JSX结构转换为JavaScript的对象结构。

import React from 'react'
import ReactDOM from 'react-dom'

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

ReactDOM.render(
    <App />,
  document.getElementById('root')
)

转换为

import React from 'react'
import ReactDOM from 'react-dom'

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

ReactDOM.render(
    React.createElement(App),
  document.getElementById('root')
)

React.createElement会构建一个 JavaScript 对象来描述你 HTML 结构的信息,包括标签名、属性、还有子元素等, 语法为

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

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

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

推荐学习:《js基础教程

以上就是一文知晓JSX原理(推荐)的详细内容,更多请关注php中文网其它相关文章!

php中文网APP下载

声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除

  • 相关标签:JSX
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    藏色散人

    好好学习天天向上!

    最近文章
    图文详解php怎么平滑升级977
    推荐视频教程
  • JavaScript正则表达式基础与实战JavaScript正则表达式基础与实战
  • JavaScript 经典案例JavaScript 经典案例
  • JavaScript模块化教程JavaScript模块化教程
  • JavaScript核心教程【JS必会的DOM BOM操作】JavaScript核心教程【JS必会的DOM BOM操作】
  • JavaScript深度剖析【Web前端必会基础技能】JavaScript深度剖析【Web前端必会基础技能】
  • 视频教程分类