JSX元素本质（三）——不是DOM元素，而是普通对象 ,该对象描述了真实DOM元素 & 语法-React.createElement(element, [props], [...children])

最新推荐文章于 2022-04-15 17:48:56 发布

viceen

最新推荐文章于 2022-04-15 17:48:56 发布

阅读量336

点赞数

分类专栏： react知识文章标签： js react

本文链接：https://blog.csdn.net/weixin_44867717/article/details/111940506

版权

react知识专栏收录该内容

54 篇文章 1 订阅

订阅专栏

JSX的本质（三）——JSX元素本质上不是DOM元素，而是普通的对象 {} ,该对象描述了真实的DOM元素 & 语法格式-React.createElement(element, [props], […children])

// 函数原型
React.createElement(element, [props], [...children])
// ------------------------------------------------
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
// 上述JSX本质上可以表示为如下形式：
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
/*
// JSX的本质就是普通对象，如下所示
let vnode = {
  tagName: 'div',
  attrs: {classname: 'active'}
  children: 'Hello, world!'
}
let div = document.createElement(vnode.tagName)
div.setAttribute(className, active)
div.innerHTML = vnode.children 
body.appendChild(div)
*/

文件结构

在这里插入图片描述

公共html文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="./style/style.css">
  <!-- 第一步：引入相关js库文件 -->
  <script type="text/javascript" src="./lib/react.development.js"></script>
  <script type="text/javascript" src="./lib/react-dom.development.js"></script>
  <!-- babel文件的作用：编译React代码，使之变成原生js代码才可以在浏览器中运行 -->
  <script type="text/javascript" src="./lib/babel.min.js"></script>
</head>

<body>
  <!-- 第二步：页面中需要提供一个容器 -->
  <div id="root"></div>
  <!-- 第三步：可以基于React实现前端功能 -->
  <script type="text/babel" src="./js/04-JSX本质.js"></script>
</body>

</html>

在VScode中，在VScode中打开，需安装插件Live Server，右键打开Open With Live Server,打开页面

实例：JSX元素本质上不是DOM元素，而是普通的对象 {}

js文件

/*
  JSX本质：JSX元素本质上不是DOM元素，而是普通的对象 {} ,该对象描述了真实的DOM元素
  React.createElement(element, [props], [...children])
*/

// let element = <div>Hello</div>
//验证
let element = React.createElement('div', null, 'Hello')

//解读
/*
  element = {
    tagName: 'div',
    attrs: null,
    children: 'Hello'
  }

  let div = document.createElement(element.tagName)
  div.setAttribute('key', 'value')
  div.innerHTML = element.children
*/

ReactDOM.render(element, document.getElementById('root'))

显示4.1

在这里插入图片描述

实例1

js文件

/*
  JSX本质：JSX元素本质上不是DOM元素，而是普通的对象 {} ,该对象描述了真实的DOM元素
  React.createElement(element, [props], [...children])
*/

// let element = <div>Hello</div>
// let element = React.createElement('div', null, 'Hello')

// let element = <div className='active'>你好</div>
let element = React.createElement('div', {className: 'active', abc: 123}, '你好')

// let element = <ul><li>TOM</li><li>JERRY</li></ul>

// let tom = React.createElement('li', null, 'TOM')
// let jerry = React.createElement('li', null, 'JERRY')
// let element = React.createElement('ul', null, [tom, jerry])

/*
  element = {
    tagName: 'div',
    attrs: null,
    children: 'Hello'
  }

  let div = document.createElement(element.tagName)
  div.setAttribute('key', 'value')
  div.innerHTML = element.children
*/

ReactDOM.render(element, document.getElementById('root'))

显示4.2

在这里插入图片描述

实例2

js文件

/*
  JSX本质：JSX元素本质上不是DOM元素，而是普通的对象 {} ,该对象描述了真实的DOM元素
  React.createElement(element, [props], [...children])
*/

// let element = <div>Hello</div>
// let element = React.createElement('div', null, 'Hello')

// let element = <div className='active'>你好</div>
// let element = React.createElement('div', {className: 'active', abc: 123}, '你好')

let element = <ul><li>TOM</li><li>JERRY</li></ul>

// let tom = React.createElement('li', null, 'TOM')
// let jerry = React.createElement('li', null, 'JERRY')
// let element = React.createElement('ul', null, [tom, jerry])

/*
  element = {
    tagName: 'div',
    attrs: null,
    children: 'Hello'
  }

  let div = document.createElement(element.tagName)
  div.setAttribute('key', 'value')
  div.innerHTML = element.children
*/

ReactDOM.render(element, document.getElementById('root'))

显示4.3.1

在这里插入图片描述

对比验证

js文件

/*
  JSX本质：JSX元素本质上不是DOM元素，而是普通的对象 {} ,该对象描述了真实的DOM元素
  React.createElement(element, [props], [...children])
*/

// let element = <div>Hello</div>
// let element = React.createElement('div', null, 'Hello')

// let element = <div className='active'>你好</div>
// let element = React.createElement('div', {className: 'active', abc: 123}, '你好')

//实例2
let element = <ul><li>TOM</li><li>JERRY</li></ul>

 let tom = React.createElement('li', null, 'TOM')
 let jerry = React.createElement('li', null, 'JERRY')
 let element = React.createElement('ul', null, [tom, jerry])

/*
  element = {
    tagName: 'div',
    attrs: null,
    children: 'Hello'
  }

  let div = document.createElement(element.tagName)
  div.setAttribute('key', 'value')
  div.innerHTML = element.children
*/

ReactDOM.render(element, document.getElementById('root'))

效果同上

注意写法

viceen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSX元素本质（三）——不是DOM元素，而是普通对象 ,该对象描述了真实DOM元素 & 语法-React.createElement(element, [props], [...children])

JSX的本质（三）——JSX元素本质上不是DOM元素，而是普通的对象 {} ,该对象描述了真实的DOM元素 & 语法格式-React.createElement(element, [props], […children])// 函数原型React.createElement(element, [props], [...children])// ------------------------------------------------const element = ( <h1
复制链接

扫一扫

专栏目录