IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> react准备阶段,虚拟DOM的两种创建方式-虚拟DOM的两种创建方式-JSX语法规则 -> 正文阅读

[JavaScript知识库]react准备阶段,虚拟DOM的两种创建方式-虚拟DOM的两种创建方式-JSX语法规则

react准备阶段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转换Wiejs -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
 
</head>
<body>
    <div id="test"></div>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
       
        // 创建虚拟DOM,不行能写字符串
        var VDOM = <h1>勇敢牛牛,不怕困难</h1>
        // 渲染虚拟DOM到页面 
        
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
       
</body>
</html>

在这里插入图片描述
在这里插入图片描述

虚拟DOM的两种创建方式

// 创建虚拟DOM
var VDOM = <h1>勇敢牛牛,不怕困难</h1>
// 渲染虚拟DOM到页面 
ReactDOM.render(VDOM,document.getElementById('test'))
// 创建虚拟DOM
var VDOM = (
        <h1>
            <span>勇敢牛牛,不怕困难</span>
        </h1>
    )
const VDOM = React.createElement('h1',{id:"title"},'奥利给')

instanceof

运算符 对象运算符(instanceof)用来判断一个对象是否属于某个指定的类或其子类的实例,如果是,返回真(true),否则返回假(false)

console.log(VDOM instanceof Object);//true

JSX语法规则

  1. 全称: JavaScript XML
  2. react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
  3. 作用: 用来简化创建虚拟DOM
  1. 写法:var ele = <h1>Hello JSX!</h1>
  2. 注意1:它不是字符串, 也不是HTML/XML标签
  3. 注意2:它最终产生的就是一个JS对象
  1. 标签名任意: HTML标签或其它标签

  2. 标签属性任意: HTML标签属性或其它

  3. 基本语法规则

    • 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
    • 遇到以 { 开头的代码,以JS语法解析: 标签中的js表达式必须用{ }包含
    • babel.js的作用
      浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    • 只要用了JSX,都要加上type=“text/babel”, 声明需要babel来处理

jsx语法规则总结:

	1.定义虚拟DOM时,不要写引号。
	2.标签中混入JS表达式时要用{}3.样式的类名指定不要用class,要用className。
	4.内联样式,要用style={{key:value}}的形式去写。
	5.只有一个根标签
	6.标签必须闭合
	7.标签首字母
	(1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
	(2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。
<body>
    <div id="test"></div>
    <div id="demo"></div>
    <!-- 此处一定要写babel -->
    <script type="text/babel">
       const myId= 'one'
       const myconter = '勇敢牛牛,不怕困难'
        // 创建虚拟DOM
        var VDOM = (
                <div >
                    <h1 id={myId} >
                        <span className='h1_1' style={{color:'blue'}}>{myconter}</span>
                    </h1>`
                    <input type="text"/>
                    <h1 id={myId.toUpperCase()}>
                        <span>{myconter.toLowerCase()}</span>
                    </h1>
                </div>
                
            )
        // 渲染虚拟DOM到页面 
        // const VDOM = React.createElement('h1',{id:"title"},'奥利给')
        ReactDOM.render(VDOM,document.getElementById('test'))
        const TDOM = document.getElementById('demo')
        console.log(VDOM);
        console.log(TDOM);
        // debugger;
        console.log(VDOM instanceof Object);
        


    </script>
       
</body>

在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-07-20 18:43:07  更:2022-07-20 18:45:06 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 17:01:09-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码