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

【React】React 基础

1. 搭建环境

npx create-react-app react-basic-demo

2. 基本使用

JSX 中使用 {} 识别 JavaScript 中的表达式,比如变量、函数调用、方法调用等。

if、switch、变量声明等属于语句,不是表达式。

列表渲染使用 map 。

image.png

事件绑定用;on + 事件名称 = { 事件处理函数/程序 }

小驼峰命名法

image.png
事件回调函数中可传形参 e 是该事件。

image.png
传递自定义参数时,事件绑定的位置改为箭头函数的写法。

image.png

image.png

3. 组件

React 中,一个组件就是一个首字母大写的函数。

image.png

4. useState

useState 向组件中添加状态变量

image.png
状态是只读的,不可以直接修改

image.png
对于对象类型的状态变量,应该传递一个新的对象来更改

image.png

5. 修改样式

image.png

可以使用 classnames 这个库方便进行 动态控制 class 类名

image.png

6. 获取 DOM

image.png

7. 组件通信

8. useEffect

useEffect 在组件中创建由渲染本身引起的操作(如发送 Ajax 请求,更改 DOM 等),即非用户操作。

useEffect(() => {}, [])

副作用函数随着依赖项的触发而执行。

image.png
清理副作用一般在组件卸载时执行

useEffect(() =>{// 实现副作用逻辑return ()=> {// 清除副作用逻辑}
}, [] )

9. React Hooks

相关文章:

【React】React 基础

1. 搭建环境 npx create-react-app react-basic-demo2. 基本使用 JSX 中使用 {} 识别 JavaScript 中的表达式,比如变量、函数调用、方法调用等。 if、switch、变量声明等属于语句,不是表达式。 列表渲染使用 map 。 事件绑定用;on 事件名称…...

CentOS7 设置 nacos 开机启动

1、新增服务文件 vim /lib/systemd/system/nacos.service2、增加如下内容 [Unit] Descriptionnacos Afternetwork.target[Service] Typeforking ExecStart/usr/local/nacos/bin/startup.sh -m standalone ExecReload/usr/local/nacos/bin/shutdown.sh ExecStop/usr/local/nac…...

使用低代码可视化开发平台快速搭建应用

目录 一、JNPF可视化平台介绍 二、搭建JNPF可视化平台 【表单设计】 【报表设计】 【流程设计】 【代码生成器】 三、使用JNPF可视化平台 1.前后端分离: 2.多数据源: 3.预置功能: 4.私有化部署: 四、总结 可视化低代码…...

数据分析思维与模型:多维度拆解分析法

多维度拆解分析法"(Multi-Dimensional Analysis and Decomposition Method)是一种用于深入分析和解决复杂问题的方法论。这种方法侧重于从多个角度或维度来考察问题,以便于更全面地理解和解决它们。它通常包括以下几个步骤: …...

Goby 漏洞发布|大华智慧园区综合管理平台 poi 文件上传漏洞

漏洞名称:大华智慧园区综合管理平台 poi 文件上传漏洞 English Name:Dahua Smart Park Integrated Management Platform poi file upload vulnerability CVSS core:9.0 影响资产数:7113 漏洞描述: 大华智慧园区综合管理平台是…...

视频修复软件 Aiseesoft Video Repair mac中文版功能

AIseesoft Video RepAIr mac是一款专业的视频修复软件,主要用于修复损坏或无法播放的视频文件。AIseesoft Video RepAIr是一个功能强大的程序,可以帮助恢复丢失或损坏的数据的视频。只要您以相同的格式提供示例视频,并在功能强大的技术的支持下,只需单击几下即可收获…...

企业spark案例 —— 出租车轨迹分析(Python)

第1关:SparkSql 数据清洗 # -*- coding: UTF-8 -*- from pyspark.sql import SparkSession if __name__ __main__:spark SparkSession.builder.appName("demo").master("local").getOrCreate()#**********begin**********#df spark.read.opt…...

SQL Server - 使用 Merge 语句实现表数据之间的对比同步

在SQL server (2008以上版本)中当需要将一个表(可能另一个库)中数据同步到另一个表中时,可以考虑使用merge语句。 只需要提供: 1.目标表 (target table) 2.数据源表 (source table) …...

【Web】Flask|Jinja2 SSTI

目录 ①[NISACTF 2022]is secret ②[HNCTF 2022 WEEK2]ez_SSTI ③[GDOUCTF 2023] ④[NCTF 2018]flask真香 ⑤[安洵杯 2020]Normal SSTI ⑥[HNCTF 2022 WEEK3]ssssti ⑦[MoeCTF 2021]地狱通讯 ①[NISACTF 2022]is secret dirsearch扫出/secret 明示get传一个secret ?…...

SPDK NVMe-oF target多路功能介绍

基本概念 SPDK NVMe-oF target multi-path是基于NVMe协议的multi-path IO和namespace sharing功能。 NVMe multi-path IO指的是两个或多个完全独立的PCI Express路径存在于一个主机和一个命名空间。 而namespace 共享是两个或多个主机使用不同的NVMe控制器访问一个shared na…...

ADAudit Plus:助力企业安全的权威选择

在当今数字化的时代,信息安全已经成为企业发展的头等大事。随着网络攻击和数据泄露的频繁发生,企业需要一种全面的解决方案来保护其关键业务数据和敏感信息。ADAudit Plus作为一款强大的安全审计软件,为企业提供了完整的安全解决方案&#xf…...

sqli-labs关卡18(基于http头部报错盲注)通关思路

文章目录 前言一、靶场通关需要了解的知识点1、什么是http请求头2、为什么http头部可以进行注入 二、靶场第十八关通关思路1、判断注入点2、爆数据库名3、爆数据库表4、爆数据库列5、爆数据库关键信息 总结 前言 此文章只用于学习和反思巩固sql注入知识,禁止用于做…...

uni-app顶部导航栏背景色如何设置,微信小程序返回键设置

百度经验 https://jingyan.baidu.com/article/67508eb48c5c37dcca1ce499.html 这样设置微信小程序没有返回键 {"path": "pages/index/index","style": {"navigationBarTitleText": "首页","app-plus": {"ti…...

基于多种设计模式重构代码(工厂、模板、策略)

基于多种设计模式重构代码 现状 系统目前支持三种业务流程,业务A, 业务B,业务C,每个流程有相同的业务逻辑,也包含很多的特性化业务。由于之前业务流程的开发是快速迭代的,而且迭代了很多次,开发…...

boomYouth

上一周实在是过得太颓废了,我感觉还是要把自己的规划做好一下: 周计划 这周截至周四,我可以用vue简单的画完登陆注册的界面并且弄一点预处理: 周一 的话可以把这些都学一下: 父传子,子传父&#xff1a…...

关于这个“这是B站目前讲的最好的【Transformer实战】教程!“视频的目前可以运行的源代码GPU版本

课程链接如下: 2.1认识Transformer架构-part1_哔哩哔哩_bilibili 因为网上可以找到源代码,但是呢,代码似乎有点小错误,我自己改正后,放到了GPU上运行, 代码如下: # 来自https://www.bilibil…...

STM32定时器输入捕获测量高电平时间

STM32定时器输入捕获测量高电平时间 输入捕获测量高电平时间CuebMX配置代码部分 本篇内容要求读者对STM32通用定时器有一点理解,如有不解,请看 夜深人静学32系列15——通用定时器 输入捕获 输入捕获是STM32通用定时器的一种功能,可以捕获特定…...

开源WIFI继电器之硬件电路

一、原理图 源文件 二、原理图说明 1、器件说明 U4:ESP8285模块 U6:触发器 U3:继电器 2、继电器状态检测说明 检测继电器线圈是否通电来判断继电器是否导通,当Q1不导通时,Q1集电极的电压为3.3V,经…...

远程执行ssh脚本

sshpass -p 123456 ssh root10.1.10.18 "/root/start.sh"sshpass: 这是一个工具,用于提供密码给 ssh 命令,以便无需手动输入密码就能通过 SSH 连接到远程服务器。 -p ‘123456’: 这是 sshpass 命令的选项,指定了连接时使用的密码…...

excel导入 Easy Excel

依旧是框架感觉有东西,但是确实是模拟不出来,各种零零散散的件太多了 controller层 ApiOperation(value "导入Excel", notes "导入Excel", httpMethod "POST", response ExcelResponseDTO.class)ApiImplicitParams({…...

免费开源神器:SMUDebugTool让你轻松掌控AMD Ryzen处理器的秘密

免费开源神器:SMUDebugTool让你轻松掌控AMD Ryzen处理器的秘密 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: ht…...

Triton模型服务化:构建高可用AI推理生产系统

1. 项目概述:当模型走出Jupyter,真正开始呼吸真实世界空气“From Notebook to Production: Running ML in the Real World (Part 4)”——这个标题本身就像一句暗号,专为那些在Jupyter里调通了模型、画出了漂亮ROC曲线、却在部署时被生产环境…...

昇腾环境300v pro 搭建qwen3 vl

1.启动dockerdocker run -itd \--name qwen-vl-serve \--nethost \--device/dev/davinci0 \--device/dev/davinci_manager \--device/dev/devmm_svm \--device/dev/hisi_hdc \-v /home/zhouty/Qwen3-VL-8B-Instruct:/workspace/models \-v /usr/local/Ascend/driver:/usr/local…...

ESP32/ESP8266固件备份全攻略:esptool与flash_download_tool实战详解

1. 项目概述:为什么我们需要备份ESP32/8266的固件? 在嵌入式开发或者物联网项目中,ESP32和ESP8266这两款芯片的应用已经非常普遍了。无论是做智能家居、数据采集还是各种DIY小玩意儿,我们经常会在上面编写和烧录固件。但不知道你…...

避开BLE开发第一个坑:搞懂广播帧里的TxAdd、ChSel字段,让你的智能硬件不再‘隐身’

避开BLE开发第一个坑:广播帧关键字段解析与实战排查指南 当你第一次将精心编写的固件烧录进蓝牙芯片,满心期待地用手机扫描设备时,却发现屏幕上空空如也——这种"设备隐身"的挫败感,几乎每个BLE开发者都经历过。问题的根…...

从B73到5000个RILs:手把手拆解玉米NAM群体构建的完整流程与关键决策

玉米NAM群体构建全流程解析:从亲本筛选到RILs优化的科学决策 站在玉米遗传研究的十字路口,我们常常面临一个核心挑战:如何在有限资源下构建既能捕获广泛遗传多样性,又能实现精准定位的群体?2009年,Buckler团…...

电动工具MCU选型与开发:从FOC算法到高集成度设计的工程实践

1. 项目概述:为什么电动工具需要一颗“聪明”的MCU?大家好,我是覃杰,在瑞萨电子上海分公司负责MCU相关的技术方案支持。今天我们不聊那些高大上的概念,就从一个工程师最熟悉的场景聊起:你手里那把正在“嗡嗡…...

Windows 11终极优化指南:Win11Debloat一键提升51%系统性能

Windows 11终极优化指南:Win11Debloat一键提升51%系统性能 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutter an…...

成都制造企业SRM和ERP数据对不上,AI协同先治理什么?

系统都上线了,为什么协同还是慢不少成都制造企业已经有ERP,也陆续上了SRM、WMS、MES或QMS。采购订单在线审批,供应商可以在SRM里报价,仓库可以扫码入库,质量部门也有检验记录。可一到真实协同,问题仍然反复…...

SHE 密钥注入的“通配符魔法”:从 UID 通配到 AUTOSAR 分层落地

想象一下,你是一家汽车电子工厂的技术员,需要为成千上万个 ECU 刷写密钥。每个 ECU 都有一个独一无二的 ID(UID)。如果每次刷写都要读取这个 UID,再根据 UID 计算出专属的密钥数据,那产线的效率会大打折扣。…...