当前位置: 首页 > news >正文

react 0至1 【jsx】

1.函数调用 
// 项目的根组件
// App -> index.js -> public/index.html(root)const count = 100function getName () {return 'test'
}function App () {return (<div className="App">this is App{/* 使用引号传递字符串 */}{'this is message'}{/* 识别js变量 */}{count}{/* 函数调用 */}{getName()}{/* 方法调用 */}{new Date().getDate()}{/* 使用js对象 */}<div style={{ color: 'red' }}>this is div</div></div>)
}export default App
2.列表渲染
const list = [{ id: 1001, name: 'Vue' },{ id: 1002, name: 'React' },{ id: 1003, name: 'Angular' }
]function App () {return (<div className="App">this is App{/* 渲染列表 */}{/* map 循环哪个结构 return结构 */}{/* 注意事项:加上一个独一无二的key 字符串或者number id */}{/* key的作用:React框架内部使用 提升更新性能的 */}<ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>)
}export default App

3.条件渲染 

const isLogin = truefunction App () {return (<div className="App">{/* 逻辑与 && */}{isLogin && <span>this is span</span>}{/* 三元运算 */}{isLogin ? <span>jack</span> : <span>loading...</span>}</div>)
}export default App
// 定义类型
const articleType = 3  // 0 1 3// 定义核心函数(根据类型返回不同的JSX模版)function getArticleTem () {if (articleType === 0) {return <div>文章1</div>} else if (articleType === 1) {return <div>文章2</div>} else {return <div>文章3</div>}
}function App () {return (<div className="App">{/* 调用函数渲染不同的模版 */}{getArticleTem()}</div>)
}export default App
 4.事件绑定
function App () {// 基础绑定const handleClick = () => {console.log('button被点击了')}// 事件参数e// const handleClick = (e) => {//   console.log('button被点击了', e)// }// 传递自定义参数const handleClick = (name) => {console.log('button被点击了', name)}// 既要传递自定义参数 而且还要事件对象econst handleClick = (name, e) => {console.log('button被点击了', name, e)}return (<div className="App"><button onClick={(e) => handleClick('jack', e)}>click me </button></div>)
}export default App

相关文章:

react 0至1 【jsx】

1.函数调用 // 项目的根组件 // App -> index.js -> public/index.html(root)const count 100function getName () {return test }function App () {return (<div className"App">this is App{/* 使用引号传递字符串 */}{this is message}{/* 识别js变…...

算法训练营day58

题目1&#xff1a;392. 判断子序列 - 力扣&#xff08;LeetCode&#xff09; 暴力解法 class Solution { public:bool isSubsequence(string s, string t) {if(s.size() > t.size()) return false;if(s.size() < t.size()) {swap(s, t);}bool reslut false;int flag …...

JAVA面试中,面试官最爱问的问题。

解释Java中的抽象类和接口的区别。 在Java中&#xff0c;抽象类和接口都是用来定义类的抽象行为和特性的&#xff0c;但它们有一些关键区别&#xff1a; ### 抽象类 1. **定义**&#xff1a;抽象类是使用abstract关键字修饰的类&#xff0c;不能被实例化&#xff0c;只能被继…...

【机器学习300问】115、对比K近邻(KNN)分类算法与逻辑回归分类算法的差异与特性?

在学习了K近邻&#xff08;KNN&#xff09;和逻辑回归&#xff08;Logistic Regression&#xff09;这两种分类算法后&#xff0c;对它们进行总结和对比很有必要。尽管两者都能有效地执行分类任务&#xff0c;但它们在原理、应用场景和性能特点上存在着显著的差异。本文就是想详…...

Selenium IDE 工具

官网 ## https://blog.csdn.net/weixin_49770443/article/details/129366721## https://www.selenium.dev/selenium-ide/是什么&#xff1f; Selenium IDE是 Selenium Suite 下的开源 Web 自动化测试工具。 Selenium IDE 一个用于火狐 (firefox) 浏览器的插件&#xff0c;打开…...

python的open函数

1.open() 1.1 参数11.2 参数21.3 参数32.with open() as 3.open函数常用的方法 3.1 读3.2 写3.3 获取文件读写类型3.4 指针移动3.5 当前指针位置3.6 truncate在python中使用open函数对文件进行处理。 1.open() python打开文件使用open()函数,返回一个指向文件的指针。该函数常…...

德克萨斯大学奥斯汀分校自然语言处理硕士课程汉化版(第六周) - 预训练模型

预训练模型 1. 预训练模型介绍 1.1. ELMo1.2. GPT1.3. BERT 2. Seq2Seq 2.1. T52.2. BART 3. Tokenization 1. 预训练模型介绍 在预训练语言模型出现之前&#xff0c;统计语言模型&#xff08;如N-gram模型&#xff09;是主流方法。这些模型利用统计方法来预测文本中的下一个…...

【Redis】Redis常见问题——缓存更新/内存淘汰机制/缓存一致性

目录 回顾数据库的问题如何提高 mysql 能承担的并发量&#xff1f;缓存解决方案应对的场景 缓存更新问题定期生成如何定期统计定期生成的优缺点 实时生成maxmemory 设置成多少合适呢&#xff1f;项目类型上来说 新的问题 内存淘汰策略Redis淘汰策略为什么redis要内存淘汰内存淘…...

【redis】redis事务

目录 Redis事务四个命令redis事务特性redis事务执行原理 Redis 事务的使用基本使用watch 监控watch 实现原理补充 Redis事务 Redis事务是一种将多个命令打包成一个单独操作的机制&#xff0c;它保证了在执行这些命令期间&#xff0c;其他命令无法插入。 四个命令 Redis事务通…...

编程入门费用:揭开学习成本的神秘面纱

编程入门费用&#xff1a;揭开学习成本的神秘面纱 编程&#xff0c;这一曾被视为专业领域的技能&#xff0c;如今已逐渐走入大众视野。越来越多的人开始尝试学习编程&#xff0c;然而&#xff0c;对于初学者来说&#xff0c;编程入门费用无疑是一个重要的考虑因素。那么&#…...

js/javascript获取时间戳的5种方法

1.获取时间戳精确到秒,13位 const timestamp Date.parse(new Date()); console.log(timestamp);//输出 1591669256000 13位 2.获取时间戳精确到毫秒,13位 const timestamp Math.round(new Date()); console.log(timestamp);//输出 1591669961203 13位 3.获取时间戳精…...

window系统下为django自动绘制模型类关系图

Django 提供第三方包 django-extensions&#xff0c;可以用来将 Django 中的 Models 生成 E-R 图。 1 安装包 pip install django-extensions 2 配置 在 Django settings.py 文件&#xff0c; INSTALLED_APPS 中添加 django_extensions INSTALLED_APPS (django_extension…...

Redis的数据淘汰策略和集群部署

05- Redis的数据淘汰策略有哪些 ? Redis 提供 8 种数据淘汰策略&#xff1a; 淘汰易失数据(具有过期时间的数据) volatile-lru&#xff08;least recently used&#xff09;&#xff1a;从已设置过期时间的数据集&#xff08;server.db[i].expires&#xff09;中挑选最近最少…...

解决CentOS 7无法识别ntfs的问题

解决CentOS 7无法识别ntfs的问题 方式一&#xff1a; Centos默认不支持ntfs文件格式&#xff0c;直接在Centos7上插U盘或移动硬盘无法识别&#xff0c;安装 ntfs-3g即可&#xff1a; # yum install epel-release -y # yum install ntfs-3g -y[rootbogon ~]# rpm -qa | grep nt…...

排名前五的 Android 数据恢复软件

正在寻找数据恢复软件来从 Android 设备恢复数据&#xff1f;本指南将为您提供 5 款最佳 Android 数据恢复软件。浏览这些软件&#xff0c;然后选择您喜欢的一款来恢复 Android 数据。 ndroid 设备上的数据丢失可能是一种令人沮丧的经历&#xff0c;无论是由于意外删除、系统崩…...

Java 程序结构 -- Java 语言的变量、方法、运算符与注释

大家好&#xff0c;我是栗筝i&#xff0c;这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 003 篇文章&#xff0c;在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验&#xff0c;并希望进…...

淘宝/天猫商品详情优惠券获取API 接口

天猫商品优惠券数据API接口是一种用于获取天猫商品优惠券信息的接口。通过该接口&#xff0c;商家或开发者可以获取到商品的优惠券信息&#xff0c;包括优惠券的名称、金额、使用条件等。 该接口的主要参数包括商品ID、优惠券ID等&#xff0c;通过传入这些参数&#xff0c;可以…...

Vue前端ffmpeg压缩视频再上传(全网唯一公开真正实现)

1.Vue项目中安装插件ffmpeg 1.1 插件版本依赖配置 两个插件的版本 "ffmpeg/core": "^0.10.0", "ffmpeg/ffmpeg": "^0.10.1"package.json 和 package-lock.json 都加入如下ffmpeg的版本配置&#xff1a; 1.2 把ffmpeg安装到项目依…...

样式的双向绑定的2种方式,实现样式交互效果

与样式标签实现双向绑定 通过布尔值来决定样式是出现还是消失 show代表着布尔值&#xff0c;show的初始值是false所以文本不会有高亮的效果&#xff0c;当用户点击了按钮&#xff0c;就会调用shows这个函数&#xff0c;并将show的相反值true赋值并覆盖给show,此时show的值为tru…...

供应链经理面试题

供应链经理面试题通常会涉及对供应链管理的基本理解、工作经验、解决问题的能力以及团队协作等多个方面。 请简要介绍一下你在供应链管理领域的工作经验和取得的成绩。你如何定义供应链管理&#xff1f;它在企业中的作用是什么&#xff1f;你认为供应链经理最重要的职责是什么…...

给CUDA新手的3DGS代码导读:从forward.cu到backward.cu,一步步拆解渲染流程

给CUDA新手的3DGS代码导读&#xff1a;从forward.cu到backward.cu&#xff0c;一步步拆解渲染流程 第一次看到3D Gaussian Splatting&#xff08;3DGS&#xff09;的CUDA代码时&#xff0c;我盯着那些复杂的核函数和内存操作发了半小时呆。作为从PyTorch转型过来的研究者&#…...

SpringBoot+Vue 毕业设计效率提升实战:从脚手架到自动化部署的全链路优化

SpringBootVue 毕业设计效率提升实战&#xff1a;从脚手架到自动化部署的全链路优化 毕业设计是每个计算机相关专业学生必须跨越的一道坎。回想我自己的经历&#xff0c;以及身边同学的故事&#xff0c;一个普遍的现象是&#xff1a;大家往往在技术选型和环境搭建上就耗费了大量…...

5分钟玩转OpenClaw:nanobot镜像云端体验与本地调试对比

5分钟玩转OpenClaw&#xff1a;nanobot镜像云端体验与本地调试对比 1. 为什么需要对比云端与本地两种体验方式 作为一个长期折腾AI工具的开发者&#xff0c;我最近在测试OpenClaw时遇到了一个典型困境&#xff1a;是直接在本地电脑安装全套环境&#xff0c;还是先用云端沙盒快…...

Matlab 2024b 新变化:手把手教你搞定TI C2000代码生成环境(含CCS避坑指南)

Matlab 2024b与TI C2000代码生成环境配置全指南&#xff1a;从版本差异到实战避坑 如果你是一位长期使用Matlab进行TI C2000系列芯片开发的嵌入式工程师&#xff0c;升级到2024b版本后可能会发现&#xff1a;熟悉的配置界面不见了&#xff0c;命令行里输入的命令也不一样了。这…...

智能高效的离线OCR解决方案:Umi-OCR从基础到进阶的全方位应用指南

智能高效的离线OCR解决方案&#xff1a;Umi-OCR从基础到进阶的全方位应用指南 【免费下载链接】Umi-OCR Umi-OCR: 这是一个免费、开源、可批量处理的离线OCR软件&#xff0c;适用于Windows系统&#xff0c;支持截图OCR、批量OCR、二维码识别等功能。 项目地址: https://gitco…...

告别Joplin!用MarkDownload+Obsidian打造你的网页剪藏工作流(附完整配置JSON)

从Joplin到Obsidian&#xff1a;用MarkDownload构建高效网页剪藏系统 每次在网上冲浪时遇到值得保存的内容&#xff0c;你是否也经历过这样的困境&#xff1f;收藏夹里堆满了再也找不到的链接&#xff0c;或是剪藏工具中杂乱无章的片段。作为一个长期依赖Joplin进行知识管理的用…...

Proxmox VE虚拟化实战:如何给MikroTik RouterOS配置PCI直通网卡(ROS 6.44.2实测)

Proxmox VE虚拟化实战&#xff1a;MikroTik RouterOS PCI直通网卡性能优化指南 在虚拟化环境中部署网络设备时&#xff0c;性能损耗一直是困扰技术人员的核心问题。当我们需要在Proxmox VE上运行MikroTik RouterOS作为软路由时&#xff0c;传统的virtio虚拟网卡方案往往无法满足…...

LeaguePrank终极指南:安全打造个性化英雄联盟游戏体验

LeaguePrank终极指南&#xff1a;安全打造个性化英雄联盟游戏体验 【免费下载链接】LeaguePrank 项目地址: https://gitcode.com/gh_mirrors/le/LeaguePrank LeaguePrank是一款基于英雄联盟LCU API开发的个性化定制工具&#xff0c;让玩家能够在不违反游戏规则的前提下…...

英飞凌Aurix2G TC3XX 中断路由与DMA联动实战解析

1. 中断与DMA联动的核心价值 第一次接触英飞凌Aurix2G TC3XX的中断路由功能时&#xff0c;我像发现新大陆一样兴奋。传统嵌入式开发中&#xff0c;ADC采样完成→CPU读取数据→存入内存的流程就像用勺子一勺一勺地运水&#xff0c;而中断触发DMA的机制则像接上了自来水管——数据…...

RDK X5上800万像素摄像头延迟从7秒降到200ms:我的5个月踩坑与优化实录

RDK X5高分辨率摄像头优化实战&#xff1a;从7秒延迟到200ms的性能飞跃 深夜的显示器前&#xff0c;我盯着屏幕上缓慢刷新的图像——32642448分辨率下&#xff0c;每按一次快门要等待7秒才能看到结果。作为一名在嵌入式视觉领域摸爬滚打多年的开发者&#xff0c;这种性能表现简…...