React入门之React_渲染基础用法和class实例写法
渲染元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>04元素渲染</title><script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script><!-- 用于解析babel --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body><div id="root1"></div><script type="text/babel">function tick(){let time = new Date().toLocaleTimeString()var template = <div><h1>hello fxt</h1><p>现在是：{time}</p></div>ReactDOM.render(template,document.getElementById('root1'))}// tick()//定时器setInterval(tick,1000)</script>
</body></html>条件判断
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05条件判断之三目</title><script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script><!-- 用于解析babel --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body><!--三目式 --><div id="root1"></div><script type="text/babel">let flag=falselet login=<div><h1>登录</h1></div>let logout=<div><h1>登出</h1></div>ReactDOM.render(flag? logout:login,document.getElementById('root1'))</script><!--函数式组件写法 开头字母大写 --><div id="root2"></div><script type="text/babel">function App() {let flag=truelet login=<div><h1>登录</h1></div>let logout=<div><h1>登出</h1></div>return flag? logout:login}ReactDOM.render(<App/>,document.getElementById('root2'))</script><!-- if/else --><div id="root3"></div><script type="text/babel">function App() {let state=falseif(state){return <div><h1>登出</h1></div>}else{} return <div><h1>登录</h1></div>}ReactDOM.render(<App/>,document.getElementById('root3'))</script>
</body></html>class类
1.实例写法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06class</title><script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"></script><!-- 用于解析babel --><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body><script>//生成实例对象的传统方法是通过构造函数function Person(x,y){this.x=xthis.y=y}Person.prototype.add=function(){console.log(this.x+this.y)}this.p=new Person(1,2).add()//上面的代码改写成es6的classclass Persons {//必须有，创建实例的时候会默认创建这个方法以及调用constructor(x,y){this.x=xthis.y=y}add (){console.log(this.x+this.y)}}const sss = new Persons(5,6).add();//构造函数的prototype属性，在es6上面继续存在，实际上类所有的方法都定义在我们的proptotype上class Persons{constructor(){}add(){}}//等同于上面Persons.prototype={constructor(){},add(){}}</script>
</body></html>2.类定义
//
class B{}
let b=new B()
// B.prototype.constructor === b.constructor true b是B的实例，它的constructor就是B类原型的constructor//定义类,跟es5一样实例的属性他除非显示定义在其本身（this）
// 否则都是定义在原型（class）上的
class Hello{constructor(x,y){this.x=x// 将实例上的方法或者变量定义在自身this// this.add=this.add.bind(this)// hello.hasOwnProperty('add') true// hello.__proto__.hasOwnProperty('add') true 判断是否定义在类上}add(){console.log(this.x)}
}
let hello=new Hello(2)
hello.add()
//hasOwnProperty指向自身属性中是否具有指定属性
// hello.hasOwnProperty('x') true 定义在本身this上的
// hello.hasOwnProperty('y') false 定义在class实例上相关文章：
React入门之React_渲染基础用法和class实例写法
渲染元素 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>04元素渲染</title><script src&…...
Git自动忽略dll文件的问题
检查了半天发现是sourcetreee的全局忽略文件导致， 从里面删除dll即可。 我是干脆直接删了全局忽略，太恶心了，如下： #ignore thumbnails created by windows Thumbs.db #Ignore files build by Visual Studio *.exe .vsconfig .s…...
sql中如何实现递归
在SQL中，递归通常是通过使用公用表表达式（Common Table Expressions，CTE）来实现的。CTE允许你定义一个临时的结果集，该结果集可以在一个SELECT、INSERT、UPDATE或DELETE语句的主体中被引用。 递归CTE有两个关键部分&a…...
GPT 的基础 - T（Transformer）
我们知道GPT的含义是： Generative - 生成下一个词 Pre-trained - 文本预训练 Transformer - 基于Transformer架构 我们看到Transformer模型是GPT的基础，这篇博客梳理了一下Transformer的知识点。 BERT: 用于语言理解。（Transformer的Encoder…...
微信小程序 --- 常用样式和组件
常用样式和组件 1. 组件和样式介绍 在开 Web 网站的时候： 页面的结构由 HTML 进行编写，例如：经常会用到 div、p、 span、img、a 等标签 页面的样式由 CSS 进行编写，例如：经常会采用 .class 、#id 、element 等选择…...
深圳智能制造半导体芯片行业源代码防泄密完整解决方案
一、芯片半导体行业防泄密，不能用监控及管控方式来实现，采用管控方式，首先不能主动防御，只能进行事后查询，并且管控方式，不利于嵌入式开发，对于嵌入式开发，不管是采用沙箱隔离或u口禁…...
Unity UI适配规则和对热门游戏适配策略的拆解
前言 本文会介绍一些关于UI适配的基础概念，并且统计了市面上常见的设备的分辨率的情况。同时通过拆解目前市面上较为成功的两款休闲游戏Royal Match和Monopoly GO(两款均为近期游戏付费榜前几的游戏)，大致推断出他们的适配策略，以供学习和参…...
嵌入式学习day25 Linux
进程基本概念: 1.进程: 程序：存放在外存中的一段数据组成的文件 进程：是一个程序动态执行的过程,包括进程的创建、进程的调度、进程的消亡 2.进程相关命令: 1.top 动态查看当前系统中的所有进程信息（根据CPU占用率排序&a…...
Oracle数据泵跨大版本迁移数据库
Oracle数据泵跨大版本迁移数据库 source库导出元数据传输dump和数据文件到target库target库导入数据库迁移后的工作 🦈场景：将测试环境中一台Oracle 11g数据库迁移到另一台新搭建的19c数据库中。 🤔分析：由于是跨数据库大版本&…...
如何在Win系统从零开始搭建Z-blog网站，并将本地博客发布到公网可访问
文章目录 1. 前言2. Z-blog网站搭建2.1 XAMPP环境设置2.2 Z-blog安装2.3 Z-blog网页测试2.4 Cpolar安装和注册 3. 本地网页发布3.1. Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 1. 前言 想要成为一个合格的技术宅或程序员，自己搭建网站制作网页是绕…...
sawForceDimensionSDK安装，sigma7+ros
force dimension的sdk中没有关于ros，借助开源的sawForceDimensionSDK实现对于数据的封装和可视化，方便后续使用 链接： GitHub - jhu-saw/sawForceDimensionSDK 具体步骤： 安装qt和ros，官网下载Force Dimension SDK …...
全量知识系统问题及SmartChat给出的答复 之3
Q8. 进一步，请展示如何使用这些技术来衡量、评估或适应不可避免的不匹配的知识汤问题的更进一步的全面代码。 为了处理不可避免的不匹配的知识汤问题，我们可以引入一些技术方法来衡量、评估或适应这种情况。 下是一个更进一步的全面代码示例࿰…...
【常用的 SVN 命令及简要示例】
常用的 SVN 命令及简要示例，供您参考： 检出代码: svn checkout https://svn.example.com/project/trunk提交修改: svn commit -m "Commit message"更新代码: svn update创建分支: svn copy https://svn.example.com/project/trunk \https://sv…...
ISP代理是什么？怎么用？
在跨境出海业务中，代理IP对于您的在线任务至关重要，尤其是对于那些运行多个帐户的人来说。为您的帐户选择正确类型的代理对于确保帐户安全非常重要，劣质的IP容易使账号遭受封号风险。IPFoxy的多种代理IP类型应用范围各有侧重，其中…...
微服务之qiankun主项目+子项目搭建
主项目使用history，子项目使用hash模式 1. 下载安装"qiankun": "^2.10.13"2. 手动调用qiankun,使用vue脚手架搭建的项目1. 主项目配置（我使用的是手动调用乾坤，在指定页面显示内容）1. 要使用的页面中引入乾坤…...
双非二本找实习前的准备day2
学习目标： 每天2-3到简单sql（刷完即止），每天复习代码随想录上的题目3道算法（时间充足可以继续），背诵的八股的问题也在这里记录了 今日碎碎念： SQL有些题用到的知识感觉不会出现在…...
快速搭建宠物医院服务小程序的步骤，无需编程经验
如果你是一家宠物医院或者宠物服务机构，想要拥有一款方便用户预约、查询信息的小程序，那么乔拓云网提供的轻应用小程序是你的不二选择。下面将为你详细介绍如何轻松打造宠物医院服务小程序。 1. 进入乔拓云网后台，点击【轻应用小程序】中的【…...
从0开始python学习-53.python中flask创建简单接口
目录 1. 创建一个简单的请求,没有写方法时默认为get 2. 创建一个get请求 3. 创建一个post请求，默认可以使用params和表单传参 4. 带有参数的post请求 1. 创建一个简单的请求,没有写方法时默认为get from flask import Flask, request# 初始化一个flask的对象 ap…...
如何怎麼搭建高效的爬蟲全球代理IP池？
爬蟲技術可以幫助我們從各類網站上獲取大量的數據資訊，但常常會遇到IP被封鎖的問題，這就是我們需要搭建全球代理IP池的原因。那麼，如何搭建一個高效的IP代理池呢？ IP代理池指什麼？ 首先，我們需要明白什麼是…...
FinalShell连接Linux
远程连接linux 我们使用VMware可以得到Linux虚拟机，但是在/Mware中操作Linux的命令行页面不太方便，主要是: 内容的复制、粘贴跨越VMware不方便 文件的上传、下载跨越VMware不方便 不方便也就是和Linux系统的各类交互，跨越VMwar 到Linux操作系…...
从TensorFlow 1到2：BigEarthNet-MM数据集官方划分代码的现代化改造与避坑指南
1. 从TensorFlow 1到2的迁移挑战 BigEarthNet-MM数据集是遥感图像分析领域的重要资源，但官方提供的19类划分代码基于TensorFlow 1.x版本编写。随着TensorFlow 2.x的普及，许多开发者在使用这些代码时遇到了兼容性问题。我最近在实际项目中完成了这个迁移…...
Subversion 取代 CVS 后的 2026
在开源软件领域，并行版本系统（CVS）一直使版本控制的选择。 恰如其分的是，CVS本身是一个自由软件，它的非限制性的技法和对网络操作的支持（允许大量的不同地域分散的程序员可以共享他们工作的特性࿰…...
AI结对编程实战手册（2024年头部科技公司内部培训材料首次公开）
第一章：智能代码生成在敏捷开发中的应用 2026奇点智能技术大会(https://ml-summit.org) 智能代码生成正深度融入敏捷开发的迭代闭环，成为提升交付速度与代码一致性的关键杠杆。它不再仅作为辅助补全工具，而是嵌入用户故事拆解、测试驱动开发…...
你的Mask数据集规范吗？Labelme标注避坑指南与质量检查脚本分享
Labelme标注实战：从数据规范到模型效果提升的全流程指南 在计算机视觉项目中，标注数据的质量往往决定了模型性能的上限。许多团队投入大量资源进行数据采集和标注，却因为忽视标注规范而导致模型训练效果不佳。本文将深入探讨如何通过Labelme工…...
PCB设计效率翻倍！AD软件中切换层与单层模式的5个实用技巧
PCB设计效率翻倍！AD软件中切换层与单层模式的5个实用技巧 在高速发展的电子设计领域，PCB设计效率直接关系到产品上市周期。作为行业标准工具之一，Altium Designer（简称AD）的强大功能往往被工程师们低估——特别是那些隐…...
**RISC-V架构下的高效嵌入式开发：从指令集到裸机编程的实战解析**在当前国产化芯片浪潮中，*8RIS
RISC-V架构下的高效嵌入式开发：从指令集到裸机编程的实战解析 在当前国产化芯片浪潮中，RISC-V作为开源指令集架构（ISA）正迅速成为开发者关注的焦点。相比传统x86或ARM架构，RISC-V不仅具备高度可定制性，还支…...
终极界面重构指南：深度重塑开源游戏库管理软件的视觉体验
终极界面重构指南：深度重塑开源游戏库管理软件的视觉体验 【免费下载链接】Playnite Video game library manager with support for wide range of 3rd party libraries and game emulation support, providing one unified interface for your games. 项目地址: …...
告别Arduino模拟引脚精度焦虑：用ADS1115实现高精度电压采集（附完整代码与接线图）
告别Arduino模拟引脚精度焦虑：用ADS1115实现高精度电压采集（附完整代码与接线图） 当你在电子秤项目中反复调试却发现称重传感器输出的微小电压变化无法被Arduino UNO准确捕捉时，当环境监测设备因温度波动导致模拟读数跳变超过预期…...
2026南宁建筑行业AI获客落地指南：AI获客服务商参考、成本与时效全详解
2026年南宁建筑行业机遇与挑战并存：平陆运河、中国—东盟自贸区3.0版、城市更新等重大项目持续释放需求，但2025年本地新增建筑相关企业超1200家，传统获客模式效能断崖式下滑。数字化精准获客已成为南宁建筑企业生存发展的核心命题。本文基于2…...
Smithbox完整指南：从游戏玩家到MOD创作者的蜕变之路
Smithbox完整指南：从游戏玩家到MOD创作者的蜕变之路 【免费下载链接】Smithbox Smithbox is a modding tool for Elden Ring, Armored Core VI, Sekiro, Dark Souls 3, Dark Souls 2, Dark Souls, Bloodborne and Demons Souls. 项目地址: https://gitcode.com/gh…...