React快速入门
最近需要学到react,这里进行一个快速的入门,参考react官网
1.创建和嵌套组件
react的组件封装是个思想,我这里快速演示代码,自己本身也不太熟悉。
代码的路径是src底下的App.js
function MyButton() {return (<button>I'm a Yeapt's Button</button>);
}function MyApp() {return (<div className={"myApp"}><h1>hello</h1><MyButton/></div>);
}export default MyApp;
小结:这里我对他的理解就是封装一个自定义的按钮,然后在使用的时候包在div里面。
2.使用 JSX 编写标签
刚刚那种包裹式的标签语法被称为JSX,这个必须闭合标签,也不能return多个jsx标签,必须在贡献的父级中,比如 div 或者 空标签包裹
<div></div>
<></>
小结:算是一个对规范的要求,官网很贴心,说:有大量的 HTML 需要移植到 JSX 中,就用在线转换器。
3.添加样式
react设计到样式的修改跟css类似,也是搞个className,然后创建个css样式文件区操作。
我这里试着把按钮改成蓝色,直接创建一个css文件夹,然后在里面写样式,最后引入
import './css/myButton.css';function MyButton() {return (<button className={"myButton"}>I'm a button</button>);
}function MyApp() {return (<div className={"myApp"}><h1>hello</h1><MyButton/></div>);
}export default MyApp;
/* In your CSS */
.myButton {background: cornflowerblue;
}
小结:目前来看很简单学过css的都会,不知道后续有没有别的引入方式,link应该也是可以的。
4.显示数据
就是一个变量传递,创建对象,显示对象数据,直接上代码。
const user = {name: 'new_baby',imgUrl: 'https://www.baidu.com/img/baidu_sylogo1.gif',imgSize: 90,}function MyButton() {return (<button className={"myButton"}>I'm a button</button>);
}function MyApp() {return (<div className={"myApp"}><h1>hello {user.name}</h1><img src={user.imgUrl} sizes={user.imgSize}/><br/><MyButton/></div>);
}export default MyApp;
小结:其实就是通过对象去赋值,这种写法更加灵活,涉及前后端交互的时候,数据由后端获取往前端赋值。
5.条件渲染
其实就是if的用法,react没有像vue那样有v-if,但是写法都类似。官网提供了三种表现形式,这里简单展示:
IF语句引入JSX
function MyApp() {let LoginStatus = true;if (LoginStatus) {return (<div className={"myApp"}><h1>hello {user.name}</h1><img src={user.imgUrl} sizes={user.imgSize}/><br/><MyButton/></div>);} else {return (<div>请登录</div>);}
}
下面是两种判断下的界面
条件运算符(JSX内部)
直接在div里面进行条件运算,工作与JSX内部。但是在测试过程中f发现有个问题,if或else后只能跟一个组件。
function MyApp() {let loginStatus = false;return (<div className={"myApp"}>{loginStatus ? (<MyButton/>) : (<h1>请登录</h1>)}</div>);
}
逻辑 运算符(内部不需要else)
当你不需要 else 分支时,可以直接用这个,估计用的比较少。
function MyApp() {let loginStatus = false;return (<div className={"myApp"}>{loginStatus && (<MyButton/>)}</div>);
}
小结:if的用法,预计第一种和第二种会用的多一点。第一种好理解,第二种写法简便。
6.渲染列表
这里是后台的重点,一定会用到,就是渲染列表,id作为唯一标识是为了方便做特殊处理,搭配if增加点高级玩法。下面直接展示代码:
const users = [{name: 'Jack', id: 1},{name: 'Hobby', id: 2},{name: 'Tom', id: 3},
]const userItems = users.map(users =><li key={users.id}>{users.name}</li>
);function MyApp() {return (<div className={"myApp"}><ul>{userItems}</ul></div>);
}
改造下定义 userItems
const userItems = users.map(users =><li key={users.id}style={{color:users.isBoy?'black':'red',}}>{users.name}</li>
);
小结:这里在写代码的时候要注意2点:
1.特殊的操作尽可能在组件中即const中完成,不要在return去操作,这样可以低耦合。
2.主键id一定要带上,即使你只是展示。
6.响应事件
简单说就是一些函数,比如按钮的点击事件,这里简单示范下:
function MyButton() {function handleClick(){alert('被你点到了');}return (<button onClick={handleClick}>点我</button>);
}
小结:就注意下事件后面不要加(),并且都是在组件内自己完成的。
7.更新界面
先介绍下这个useState(),是改变状态的开关,将状态添加到函数组件需要4个步骤:启用状态、初始化、读取和更新。
import { useState } from 'react';
function MyButton() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1)}return (<button className={"myButton"} onClick={handleClick}>点击了{count}次</button>);
}
小结:useState是react自带的属性后续需要深入了解Hook,count属性每个组件都自己管控不会干扰。
8.组件间共享数据
两个组件之间的数据同步,感觉有点像消息传递,定义局部变量。
官网称之为:按这种方式传递下来的信息被称作 prop。
这里看看代码:
function MyButton({count, onClick, user}) {return (<button className={"myButton"} onClick={onClick}>{user}点击了{count}次</button>);
}function MyApp() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1)}return (<div className={"myApp"}><MyButton user={'张三'} count={count} onClick={handleClick}/><MyButton user={'李四'} count={count} onClick={handleClick}/></div>);
}export default MyApp;
相关文章:

React快速入门
最近需要学到react,这里进行一个快速的入门,参考react官网 1.创建和嵌套组件 react的组件封装是个思想,我这里快速演示代码,自己本身也不太熟悉。 代码的路径是src底下的App.js function MyButton() {return (<button>I…...

windows权限维持—SSPHOOKDSRMSIDhistorySkeletonKey
windows权限维持—SSP&HOOK&DSRM&SIDhistory&SkeletonKey 1. 权限维持介绍1.1. 其他 2. 基于验证DLL加载—SPP2.1. 操作演示—临时生效2.1.1. 执行命令2.1.2. 切换用户 2.2. 操作演示—永久生效2.2.1. 上传文件2.2.2. 执行命令2.2.3. 重启生效 2.3. 总结 3. 基…...
CSS 两栏布局和三栏布局的实现
文章目录 一、两栏布局的实现1. floatmargin2. flaotBFC3. 定位margin4. flex 布局5. grid布局 二、三栏布局的实现1. float margin2. float BFC3. 定位 margin(或者定位BFC)4. flex布局5. 圣杯布局6. 双飞翼布局 一、两栏布局的实现 两栏布局其实就是左侧定宽,…...

消息中间件相关面试题
👏作者简介:大家好,我是爱发博客的嗯哼,爱好Java的小菜鸟 🔥如果感觉博主的文章还不错的话,请👍三连支持👍一下博主哦 📝社区论坛:希望大家能加入社区共同进步…...

成集云 | 电子签署集成腾讯云企业网盘 | 解决方案
源系统成集云目标系统 方案介绍 电子签署是通过电子方式完成合同、文件或其他文件的签署过程。相较于传统的纸质签署,电子签署具有更高效、更便捷、更安全的优势。 在电子签署过程中,使用电子签名技术来验证签署者的身份并确保签署文件的完整性。电子…...

提升大数据技能,不再颓废!这6家学习网站是你的利器!
随着国家数字化转型,大数据领域对人才的需求越来越多。大数据主要研究计算机科学和大数据处理技术等相关的知识和技能,从大数据应用的三个主要层面(即数据管理、系统开发、海量数据分析与挖掘)出发,对实际问题进行分析…...

uniapp开发小程序-有分类和列表时,进入页面默认选中第一个分类
一、效果: 如下图所示,进入该页面后,默认选中第一个分类,以及第一个分类下的列表数据。 二、代码实现: 关键代码: 进入页面时,默认调用分类的接口,在分类接口里做判断ÿ…...

小程序-uni-app:hbuildx uni-app 安装 uni-icons 及使用
一、官方文档找到uni-icons uni-app官网 二、下载插件 三、点击“打开HBuildX” 四、选择要安装的项目 五、勾选要安装的插件 六、安装后,项目插件目录 根目录uni_modules目录下增加uni-icons、uni-scss 七、引入组件,使用组件 <uni-icons type&qu…...
PHP中in_array()函数用法详解
in_array() 函数是PHP中常用的数组函数之一,用于搜索数组中是否存在指定的值。 语法 bool in_array ( mixed $needle , array $haystack [, bool $strict FALSE ] ) 参数描述needle必需。规定要在数组搜索的值。haystack必需。规定要搜索的数组。strict可选。如…...

热电联产在综合能源系统中的选址定容研究(matlab代码)
目录 1 主要内容 目标函数 程序模型 2 部分代码 3 程序结果 1 主要内容 该程序参考《热电联产在区域综合能源系统中的定容选址研究》,主要针对电热综合能源系统进行优化,确定热电联产机组的位置和容量,程序以33节点电网和17节点热网为例…...
校园网安全风险分析
⒈物理层的安全风险分析 网络的物理安全风险主要指网络周边环境和物理特性引起的网络设备和线路的不可用 , 而 造成网络系统的不可用。我们在考虑校园网络安全时,首先要考虑物理安全风险,它是整个 网络系统安全的前提。物理安全风险有:设备…...

kafka--kafka的基本概念-topic和partition
一、kafka的基本概念-topic和partition 1、topic (主题 ) topic是逻辑概念 以Topic机制来对消息进行分类的,同一类消息属于同一个Topic,你可以将每个topic看成是一个消息队列。 生产者(producer)将消息发…...

【LVS】3、LVS+Keepalived群集
为什么用它,为了做高可用 服务功能 1.故障自动切换 2.健康检查 3.节点服务器高可用-HA Keepalived的三个模块: core:Keepalived的核心,负责主进程的启动、维护;调用全局配置文件进行加载和解析 vrrp:实…...

对前端PWA应用的部分理解和基础Demo
一、什么是PWA应用? 1、PWA简介 渐进式Web应用(Progressive Web App),简称PWA,是 Google 在 2015 年提出的一种使用web平台技术构建的应用程序,官方认为其核心在于Reliable(可靠的…...

CSGO饰品价格会一直下跌吗?市场何时止跌回升?
最后一届巴黎major终于落下帷幕,Vitality小蜜蜂2-0战胜GL成功赢下本次Major冠军,也是首次夺得Major冠军!有人欢喜有人忧啊,csgo搬砖的饰品商人们一点也高兴不起来。 4月-5月,csgo皮肤饰品已持续走低快两个月了。手里满…...

线程池原理
一、线程池的定义 线程池,按照配置参数(核心线程数、最大线程数等)创建并管理若干线程对象,没有任务的时候,这些线程都处于等待空闲状态。如果有新的线程任务,就分配一个空闲线程执行。如果所有线程都处于…...

拷贝构造函数
1. 拷贝构造函数是构造函数的一个重载形式。 2. 拷贝构造函数的参数只有一个且必须是类类型对象的引用,使用传值方式编译器直接报错, 因为会引发无穷递归调用。 class Date { public:Date(int year 1900, int month 1, int day 1){_year year;_mont…...
数据库: MySQL安装部署、主从
单机部署 mkdir -p /opt/soft/archive cd /opt/soft/archivewget -i -c https://dev.mysql.com/get/mysql80-community-release-el7-7.noarch.rpm yum install -y mysql80-community-release-el7-7.noarch.rpm yum-config-manager --enable mysql80-community yum install -y …...

Java IO流(二)IO模型(BIO|NIO|AIO)
概述 Java IO模型同步阻塞IO(BIO)、同步非阻塞IO(NIO)、异步非阻塞IO(AIO/NIO2),Java中的BIO、NIO和AIO理解为是Java语言对操作系统的各种IO模型的封装 IO模型 BIO(Blocking I/O) 概述 BIO是一种同步并阻…...

java版本spring cloud 企业工程系统管理 工程项目管理系统源码em
工程项目管理软件(工程项目管理系统)对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营,全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典ÿ…...

【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V,是一个正整数,表示每 V V V 个普通金属 O O O 可以冶炼出 …...

JVM 内存结构 详解
内存结构 运行时数据区: Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器: 线程私有,程序控制流的指示器,分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...

代码规范和架构【立芯理论一】(2025.06.08)
1、代码规范的目标 代码简洁精炼、美观,可持续性好高效率高复用,可移植性好高内聚,低耦合没有冗余规范性,代码有规可循,可以看出自己当时的思考过程特殊排版,特殊语法,特殊指令,必须…...

Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
Linux系统部署KES
1、安装准备 1.版本说明V008R006C009B0014 V008:是version产品的大版本。 R006:是release产品特性版本。 C009:是通用版 B0014:是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存:1GB 以上 硬盘…...
libfmt: 现代C++的格式化工具库介绍与酷炫功能
libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库,提供了高效、安全的文本格式化功能,是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全:…...

实战三:开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用,用户可以通过网页界面上传黑白视频,系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观,不需要了解技术细节。 效果图 二、实现思路 总体思路: 用户通过Gradio界面上…...