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

React入门之React_渲染基础用法和class实例写法

news 2026/1/23 20:59:31

渲染元素

<!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&…...

编程日记 2024/3/1 5:42:01

Git自动忽略dll文件的问题

检查了半天发现是sourcetreee的全局忽略文件导致&#xff0c; 从里面删除dll即可。 我是干脆直接删了全局忽略&#xff0c;太恶心了&#xff0c;如下&#xff1a; #ignore thumbnails created by windows Thumbs.db #Ignore files build by Visual Studio *.exe .vsconfig .s…...

编程日记 2024/3/1 5:38:59

sql中如何实现递归

在SQL中&#xff0c;递归通常是通过使用公用表表达式&#xff08;Common Table Expressions&#xff0c;CTE&#xff09;来实现的。CTE允许你定义一个临时的结果集&#xff0c;该结果集可以在一个SELECT、INSERT、UPDATE或DELETE语句的主体中被引用。 递归CTE有两个关键部分&a…...

编程日记 2024/3/1 5:32:54

GPT 的基础 - T（Transformer）

我们知道GPT的含义是&#xff1a; Generative - 生成下一个词 Pre-trained - 文本预训练 Transformer - 基于Transformer架构 我们看到Transformer模型是GPT的基础&#xff0c;这篇博客梳理了一下Transformer的知识点。 BERT: 用于语言理解。&#xff08;Transformer的Encoder…...

编程日记 2024/3/1 5:27:50

微信小程序 --- 常用样式和组件

常用样式和组件 1. 组件和样式介绍 在开 Web 网站的时候&#xff1a; 页面的结构由 HTML 进行编写&#xff0c;例如&#xff1a;经常会用到 div、p、 span、img、a 等标签 页面的样式由 CSS 进行编写&#xff0c;例如&#xff1a;经常会采用 .class 、#id 、element 等选择…...

编程日记 2024/3/1 5:23:47

深圳智能制造半导体芯片行业源代码防泄密完整解决方案

一、芯片半导体行业防泄密&#xff0c;不能用监控及管控方式来实现&#xff0c;采用管控方式&#xff0c;首先不能主动防御&#xff0c;只能进行事后查询&#xff0c;并且管控方式&#xff0c;不利于嵌入式开发&#xff0c;对于嵌入式开发&#xff0c;不管是采用沙箱隔离或u口禁…...

编程日记 2024/3/1 5:21:45

Unity UI适配规则和对热门游戏适配策略的拆解

前言 本文会介绍一些关于UI适配的基础概念&#xff0c;并且统计了市面上常见的设备的分辨率的情况。同时通过拆解目前市面上较为成功的两款休闲游戏Royal Match和Monopoly GO(两款均为近期游戏付费榜前几的游戏)&#xff0c;大致推断出他们的适配策略&#xff0c;以供学习和参…...

编程日记 2024/3/1 5:18:43

嵌入式学习day25 Linux

进程基本概念: 1.进程: 程序&#xff1a;存放在外存中的一段数据组成的文件 进程&#xff1a;是一个程序动态执行的过程,包括进程的创建、进程的调度、进程的消亡 2.进程相关命令: 1.top 动态查看当前系统中的所有进程信息&#xff08;根据CPU占用率排序&a…...

编程日记 2024/3/1 5:17:42

Oracle数据泵跨大版本迁移数据库

Oracle数据泵跨大版本迁移数据库 source库导出元数据传输dump和数据文件到target库target库导入数据库迁移后的工作 &#x1f988;场景&#xff1a;将测试环境中一台Oracle 11g数据库迁移到另一台新搭建的19c数据库中。 &#x1f914;分析&#xff1a;由于是跨数据库大版本&…...

编程日记 2024/3/1 5:16:41

如何在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. 前言 想要成为一个合格的技术宅或程序员&#xff0c;自己搭建网站制作网页是绕…...

编程日记 2024/3/1 5:11:37

sawForceDimensionSDK安装，sigma7+ros

force dimension的sdk中没有关于ros&#xff0c;借助开源的sawForceDimensionSDK实现对于数据的封装和可视化&#xff0c;方便后续使用 链接&#xff1a; GitHub - jhu-saw/sawForceDimensionSDK 具体步骤&#xff1a; 安装qt和ros&#xff0c;官网下载Force Dimension SDK …...

编程日记 2024/3/1 5:10:36

全量知识系统问题及SmartChat给出的答复 之3

Q8. 进一步&#xff0c;请展示如何使用这些技术来衡量、评估或适应不可避免的不匹配的知识汤问题的更进一步的全面代码。 为了处理不可避免的不匹配的知识汤问题&#xff0c;我们可以引入一些技术方法来衡量、评估或适应这种情况。 下是一个更进一步的全面代码示例&#xff0…...

编程日记 2024/3/1 5:08:34

【常用的 SVN 命令及简要示例】

常用的 SVN 命令及简要示例&#xff0c;供您参考&#xff1a; 检出代码: 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…...

编程日记 2024/3/1 5:06:33

ISP代理是什么？怎么用？

在跨境出海业务中&#xff0c;代理IP对于您的在线任务至关重要&#xff0c;尤其是对于那些运行多个帐户的人来说。为您的帐户选择正确类型的代理对于确保帐户安全非常重要&#xff0c;劣质的IP容易使账号遭受封号风险。IPFoxy的多种代理IP类型应用范围各有侧重&#xff0c;其中…...

编程日记 2024/3/1 5:04:31

微服务之qiankun主项目+子项目搭建

主项目使用history&#xff0c;子项目使用hash模式 1. 下载安装"qiankun": "^2.10.13"2. 手动调用qiankun,使用vue脚手架搭建的项目1. 主项目配置&#xff08;我使用的是手动调用乾坤&#xff0c;在指定页面显示内容&#xff09;1. 要使用的页面中引入乾坤…...

编程日记 2024/3/1 4:57:24

双非二本找实习前的准备day2

学习目标&#xff1a; 每天2-3到简单sql&#xff08;刷完即止&#xff09;&#xff0c;每天复习代码随想录上的题目3道算法&#xff08;时间充足可以继续&#xff09;&#xff0c;背诵的八股的问题也在这里记录了 今日碎碎念&#xff1a; SQL有些题用到的知识感觉不会出现在…...

编程日记 2024/3/1 4:56:24

快速搭建宠物医院服务小程序的步骤，无需编程经验

如果你是一家宠物医院或者宠物服务机构&#xff0c;想要拥有一款方便用户预约、查询信息的小程序&#xff0c;那么乔拓云网提供的轻应用小程序是你的不二选择。下面将为你详细介绍如何轻松打造宠物医院服务小程序。 1. 进入乔拓云网后台&#xff0c;点击【轻应用小程序】中的【…...

编程日记 2024/3/1 4:54:22

从0开始python学习-53.python中flask创建简单接口

目录 1. 创建一个简单的请求,没有写方法时默认为get 2. 创建一个get请求 3. 创建一个post请求&#xff0c;默认可以使用params和表单传参 4. 带有参数的post请求 1. 创建一个简单的请求,没有写方法时默认为get from flask import Flask, request# 初始化一个flask的对象 ap…...

编程日记 2024/3/1 4:53:21

如何怎麼搭建高效的爬蟲全球代理IP池？

爬蟲技術可以幫助我們從各類網站上獲取大量的數據資訊&#xff0c;但常常會遇到IP被封鎖的問題&#xff0c;這就是我們需要搭建全球代理IP池的原因。那麼&#xff0c;如何搭建一個高效的IP代理池呢&#xff1f; IP代理池指什麼&#xff1f; 首先&#xff0c;我們需要明白什麼是…...

编程日记 2024/3/1 4:50:19

FinalShell连接Linux

远程连接linux 我们使用VMware可以得到Linux虚拟机&#xff0c;但是在/Mware中操作Linux的命令行页面不太方便&#xff0c;主要是: 内容的复制、粘贴跨越VMware不方便 文件的上传、下载跨越VMware不方便 不方便也就是和Linux系统的各类交互&#xff0c;跨越VMwar 到Linux操作系…...

编程日记 2024/3/1 4:49:18

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2026/1/21 0:18:07

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/1/21 5:34:33

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/15 7:06:11

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/12/13 4:20:30

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/11/30 10:30:15

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2026/1/21 12:18:11

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/11/12 0:06:50