[emailprotected](2)核心概念-JSX

目录

    • 1,什么是 jsx
    • 2,空标签
    • 3,通过大括号使用 js
    • 4,防止注入攻击
    • 5,元素的不可变性

官方文档

1,什么是 jsx

  • Facebook 起草的 js 扩展语法。
  • 本质上是 js 对象,会被 babel 编译,最终转换为 React.createElement() 语法。
  • 每个 jsx 表达式,有且仅有一个根节点。(因为函数只能有一个返回值
  • jsx 语法中,html标签必须闭合。

2,空标签

这个空标签被称作 Fragment。React Fragment 允许你将子元素分组,而不会在 HTML 结构中添加额外节点。

import { Fragment } from 'react';function Post() {return (<Fragment><PostTitle /><PostBody /></Fragment>);
}
// 或
function Post() {return (<><PostTitle /><PostBody /></>);
}

通常只需要<> </>,除非需要将 key 传递给 Fragment。

3,通过大括号使用 js

因为 jsx 最终会被 babel 编译为 React.createElement() 语法。该语法中,除了第1,2个参数外,剩下的参数都会作为元素的子节点,所以在 jsx 中通过 {} 使用的 js 有一些限制:

1,不能是普通对象,但可以是 React 元素对象。

// 都是 React 元素对象,写法不同。
const obj = <span key={index}>一个span元素</span>;
const div = React.createElement("div", {}, `${a} * ${b} = ${a*b}`)

2,nullundefinedfalse 不会输出。
3,可以是数组,React 会遍历数组元素作为子节点。所以数组元素同样有上面规则和限制。

import React from "react";
import ReactDOM from "react-dom";const span = <span>这是span元素</span>;
const arr = [2, null, false, undefined, 3, span];const div = <div>{arr}</div>;
ReactDOM.render(div, document.getElementById("root"));

在这里插入图片描述

4,防止注入攻击

普通字符串中的html标签,react 会自动编码,采用 innerText 插入。edit HTML 查看初始 html 代码。

const content = "<h1>h1元素</h1><p>p元素</p>";
const div = <div>{content}</div>;

在这里插入图片描述

如果作为普通 HTML 插入,需要使用 dangerouslySetInnerHTML,只能对可信内容使用 HTML 插值,绝不要将用户提供的内容作为插值。

const content = "<h1>h1元素</h1><p>p元素</p>";
const div = <div dangerouslySetInnerHTML={{ __html: content }}></div>;

在这里插入图片描述

5,元素的不可变性

React 元素对象的所有属性,都不允许被修改。通过 Object.freeze() 实现。

React 元素对象:通过 React.createElement() 创建或在 jsx 中创建的:

在这里插入图片描述

此时不允许 div.props.xxxx 来修改对象属性。

如果确实需要更改元素对象的属性,需要重新创建JSX元素对象。

重新创建的是 js 对象,重新渲染也只是对比修改虚拟DOM,并不会太影响效率。

let num = 0setInterval(() => {num++// 每次都新创建const div = <div title="22ss">{num}</div>ReactDOM.render(div, document.getElementById('root'))
}, 1000)

以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/840830.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

军队仓库管理系统|DW-S301系统特点

部队仓库管理系统DW-S301系统通过数据采集、互联网和物联网技术&#xff0c;实现数字化智能管控&#xff0c;以提高军用物资的仓储准确率和流转率&#xff0c;缩短周转时间&#xff0c;降低库存成本&#xff0c;也有助于消除生产过程中的不确定性。 系统功能&#xff1a;通过部…

web学习笔记(五十六)

目录 1.绑定类名和style 1.1 绑定类名 1.1.1 绑定单个类名 1.1.2 绑定多个类名 1.2 style相关知识 2. vue的响应式原理 3. v-once 4.本地搭建Vue单页应用 4.1 安装Vue脚手架 4.2 安装对应的包文件 4.3 运行项目 1.绑定类名和style 1.1 绑定类名 1.1.1 绑定单个类名…

openstack报错:openstack volume service list The server is currently unavailable.

openstack报错&#xff1a; [rootcontroller ~]# openstack volume service list The server is currently unavailable. Please try again at a later time.<br /><br /> The Keystone service is temporarily unavailable.(HTTP 503)操作&#xff1a;做cinder 报…

计算机网络协议

网络协议 基于TCP的应用层协议 POP3&#xff08;Post Office Protocol 3&#xff09;&#xff1a; 用于支持客户端远程管理服务器上的电子邮件。它支持**“离线”邮件处理**&#xff0c;即邮件发送到服务器上后&#xff0c;一旦邮件被POP3客户端下载到本地计算机&#xff0c;…

NL6621 实现获取天气情况

一、主要完成的工作 1、建立TASK INT32 main(VOID) {/* system Init */SystemInit();OSTaskCreate(TestAppMain, NULL, &sAppStartTaskStack[NST_APP_START_TASK_STK_SIZE -1], NST_APP_TASK_START_PRIO); OSStart();return 1; } 2、application test task VOID TestAp…

【vue3】计算属性 computed 与 lazy

在 Vue 3 中&#xff0c;computed 和 lazy 都是与响应式系统和数据计算相关的概念&#xff0c;但它们具有不同的用途和行为。 computed 计算属性 computed 是 Vue 中的一个核心功能&#xff0c;用于声明依赖于其他响应式数据的计算属性。当计算属性的依赖数据发生变化时&…

Python3.10用Pyinstaller打包exe报错: IndexError: tuple index out of range

使用Python3.10时&#xff0c;Pyinstaller出现IndexError: tuple index out of range错误&#xff0c;部分异常信息如下&#xff1a; .......yield from get_instructions(code_object)File "C:\Program Files\Python\lib\dis.py", line 338, in _get_instructions_…

网页上的超链接复制到Excel中+提取出网址+如何保存

定义 超链接网页标题地址栏 使用的工具 2024年的WPS是不行的&#xff0c; 如果把知乎网页上的超链接复制到WPS中的Excel中&#xff0c;就会丢掉地址&#xff0c;只剩下网页标题 具体操作&#xff08;转载,在Excel2013上验证可行&#xff09; [1]启用【开发工具】&#xff…

Golang net/http标准库常用方法(三)

大家好&#xff0c;针对Go语言 net/http 标准库&#xff0c;将梳理的相关知识点分享给大家~~ 围绕 net/http 标准库相关知识点还有许多章节&#xff0c;请大家多多关注。 文章中代码案例只有关键片段&#xff0c;完整代码请查看github仓库&#xff1a;https://github.com/hltfa…

科技前沿:IDEA插件Translation v3.6 带来革命性更新,翻译和发音更智能!

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

python获取安装路径盘符

文章目录 一、前言二、实现方法一、前言 python写的客户端工具需要安装时,可以给用户一个默认的安装路径,如果直接写死个D、E、F盘什么的,那用户可能没有那个盘符,但是如果直接指定系统盘C盘,又不是那么友好,所以默认指定的安装路径应该尽量满足下面的要求: 盘符存在盘…

【MySQL精通之路】系统变量-系统变量权限

系统变量可以具有影响整个服务器操作的全局值&#xff0c;也可以具有仅影响当前会话的会话值&#xff0c;或者两者兼有&#xff1a; 对于动态系统变量&#xff0c;SET语句可用于更改其全局或会话运行时值&#xff08;或同时更改两者&#xff09;&#xff0c;以影响当前服务器实…

spring boot 启动类加载的优化

1减少依赖&#xff0c;不用的依赖去掉&#xff0c; 2、使用自定义配置bean进行加载&#xff0c;减少更多的不必要加载的组件 3、启动spring boot的配置懒加载模式&#xff0c; 4、将需要启动的bean写入到项目中的文件&#xff0c;去加载该目录下的bean文件 5、使用编译时优化&a…

利用天气API接口自己DIY一个预报小管家

天气预报查询API 是一种实用的日常工具&#xff0c;它通过编程方式为开发者提供实时的天气数据。开发者可以通过简单的代码调用&#xff0c;与天气预报服务提供商进行交互&#xff0c;获取特定地区的天气信息&#xff0c;如温度、湿度、风速、风向、降水量等&#xff0c;以及未…

【车载以太网测试从入门到精通】——SOME/IP协议测试

系列文章目录 【车载以太网测试从入门到精通】系列文章目录汇总 文章目录 系列文章目录前言一、SOME/IP时间参数1.INITIAL_DELAY时间2.REPETITIONS_MAX次数3.REPETITIONS_BASE_DELAY时间4.CYCLIC_OFFER_DELAY时间5.TIME_TO_LIVE时间6.SUBSCRIBE_RETRY_DELAY时间二、SOME/IP服务…

【文末附gpt升级方案】TikTok Symphony AI套件:智能视频制作的新篇章

TikTok Symphony AI套件&#xff1a;智能视频制作的新篇章 摘要 随着短视频平台的兴起&#xff0c;视频内容的创作与制作已成为品牌方吸引用户、传递信息的重要手段。TikTok作为全球领先的短视频平台&#xff0c;近日宣布推出Symphony AI套件&#xff0c;旨在通过人工智能技术…

OWASP top10--SQL注入(一)

SQL注入式攻击技术&#xff0c;一般针对基于Web平台的应用程序.造成SQL注入攻击漏洞的原因&#xff0c;是由于程序员在编写Web程序时&#xff0c;没有对浏览器端提交的参数进行严格的过滤和判断。用户可以修改构造参数&#xff0c;提交SQL查询语句&#xff0c;并传递至服务器端…

XILINX FPGA DDR 学习笔记(一)

DDR 内存的本质是数据的存储器&#xff0c;首先回到数据的存储上&#xff0c;数据在最底层的表现是地址。为了给每个数据进行存放并且在需要的时候读取这个数据&#xff0c;需要对数据在哪这个抽象的概念进行表述&#xff0c;我们科技树发展过程中把数据在哪用地址表示。一个数…

【AI】DeepStream(06):deepstream-test4-示例演示

【AI】AI学习目录汇总 1、简介 deepstream-test1:演示各种 DeepStream 插件构建 GStreamer 管道。从文件中获取视频、解码、批处理,然后进行对象检测,最后在屏幕上渲染框。 deepstream-test2:和deepstream-test1相比,多了目标跟踪和分类,对目标跟踪并使用数字做编号,并…

K8S认证|CKA题库+答案| 11. 创建PVC

11、创建PVC 您必须在以下Cluster/Node上完成此考题&#xff1a; Cluster Master node Worker node ok8s master …