【React】React 基础

news2024/12/23 12:21:41

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1227491.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OSG加载模型时显示读取进度

目录 1. 前言 2. 开发环境说明 3. 功能实现 3.1. 方法1 3.2. 方法2 3.3. 方法3 4. 附加说明 1. 前言 OSG中加载模型文件到视景器,一般通过osgDB::readXXXX系列开头的函数来加载模型,如:osgDB::readNodeFile、osgDB::readImageFile、os…

055-第三代软件开发-控制台输出彩虹日志

第三代软件开发-控制台输出彩虹日志 文章目录 第三代软件开发-控制台输出彩虹日志项目介绍控制台输出彩虹日志实现原理真实代码 总结 关键字: Qt、 Qml、 关键字3、 关键字4、 关键字5 项目介绍 欢迎来到我们的 QML & C 项目!这个项目结合了 QM…

MyBatis使用注解操作及XML操作

文章目录 1. 注解操作1.1 打印日志1.2 参数传递1.3 增(Insert)注意1:重命名注意2:返回主键 1.4 删(Delete)1.5 改(Update)1.6 查(Select)1. 配置,…

STM32串口重定向/实现不定长数据接收

STM32串口重定向/实现不定长数据接收 重定向MicroLIB 不定长数据接收 这是一期STM32内容代码分享,关于STM32重定向的代码和一些出现的问题吗,以及串口接收不定长数据思路 重定向 重定向的功能:能够在STM32中使用printf函数通过串口发送数据 …

最新版微信如何打开青少年模式?

最新版微信如何打开青少年模式? 1、将手机微信升级到最新版,并打开后点击底部我的进入; 2、在我的内,找到并点击设置进入; 3、在设置内找到青少年模式,并点击进入开启微信青少年模式; 原文来源…

【碰碰球】弹珠游戏-微信小程序项目开发流程详解

还记得小时候玩过的弹珠撞击游戏不,这里把它的实现原理通俗易懂地讲一下,看看怎样实现一个碰碰球(弹珠)小游戏,除了个人玩法,也可以双人玩哦,与打乒乓球一样的,可练习临场反应。 创建项目 打开微信开发者…

在线随机字符串生成工具

具体请前往:在线随机字符串生成器--通过该工具生成动态复杂随机密码,随机字符串等,加密盐等

特效!视频里的特效在哪制作——Adobe After Effects

今天,我们来谈谈一款在Adobe系列中推出的一款图形视频处理软件,适用于从事设计和视频特技的机构,包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室的属于层类型后期软件——Adobe After Effects。 Adobe After Effects&#xf…

ubuntu安装完qt后发现找不到图标

layout: post # 使用的布局(不需要改) title: Qt启动问题 # 标题 subtitle: ubuntu安装完Qt #副标题 date: 2023-11-18 # 时间 author: BY ThreeStones1029 # 作者 header-img: img/about_bg.jpg #这篇文章标题背景图片 catalog: true # 是否归档 tags: …

Pytest自动化测试框架:mark用法---测试用例分组执行

pytest中的mark: mark主要用于在测试用例/测试类中给用例打标记(只能使用已注册的标记名),实现测试分组功能,并能和其它插件配合设置测试方法执行顺序等。 如下图,现在需要只执行红色部分的测试方法,其它方法不执行&am…

中间件安全: Apache 远程代码执行 (CVE-2021-42013)

中间件安全: Apache 远程代码执行 (CVE-2021-42013) Apache HTTP Server是美国阿帕奇(Apache)基金会的一款开源网页服务器。该服务器具有快速、可靠且可通过简单的API进行扩充的特点,发现 Apache HTTP Ser…

EEPROM与Flash的区别

EEPROM与Flash的区别 EEPROMEEPROM内部功能框图实现写入数据内部结构存储管在充电或放电状态下有着不同的阈值电压 问题点EEPROM是如何失效的呢?为何EEPROM不能做大呢? ------------------------------------------------------------------------------…

《轻松入门!快速安装PyCharm,打造高效Python编程环境》

「Pycharm安装包和相关插件(Windows 64位)」https://www.aliyundrive.com/s/jByv6vjShVz 提取码: 1234 视频教程:https://www.douyin.com/video/7303106933521763596?previous_pageapp_code_link 第一步:找到一起下载的Pycharm安…

PyCharm:PyCharm新建.py文件时自动带出指定内容

在pycharm中加上指定内容,每次新建.py文件都会自动带出指定内容 操作: File—Setting—Editor----File and Code Templates--Python Script 在右侧窗口中加上如下信息 # encoding: utf-8 # author: Jeffrey # file: ${NAME}.py # time: ${DATE} ${TI…

java拼图游戏(待优化)

启动类 package com.yx.ui;public class App { //启动入口public static void main(String[] args) {//如果想要开启一个界面,就创建谁的对象 // new DengJFrame(); // new ZCJFrame();new GameJFrame();}}游戏类 package com.yx.ui;import java.awt.event.KeyEv…

Python大数据之linux学习总结——day10_hive调优

hive调优 hive调优hive命令和参数配置1.hive数据压缩压缩对比开启压缩 2.hive数据存储[练习]行列存储原理存储压缩比拓展dfs -du -h 3. fetch抓取4. 本地模式5. join的优化操作6. 列裁剪7. 分区裁剪8. group by 操作9. count(distinct)10. 笛卡尔积11. 动态分区[练习]12. 如何调…

多线程(初阶)

文章目录 一、认识线程(Thread)1.1 概念1.1.1 什么是线程1.1.2 为什么要有线程1.1.3 进程和线程的区别(重要)1.1.4 Java的线程和操作系统线程的关系 1.2 第一个多线程 程序1.3 创建线程(重要)1.3.1 继承 Tr…

论文-分布式-拜占庭将军问题

目录 0-前言 1-导引 2-不可能性 3将军(1叛徒)问题不存在解/不能达成共识 少于3m1个将军(有m个叛徒)不存在解/不能达成共识 精确一致性与近似一致性是同等困难的 3-使用口头消息的解 “口头消息”的含义 OM(m)算法的步骤 OM(m)算法的正确性推导 4-使用签名消息情况下…

SpringBoot中日志的使用log4j

SpringBoot中日志的使用log4j 项目中日志系统是必不可少的,目前比较流行的日志框架有 log4j、logback 等,这两个框架的作者是同一个 人,Logback 旨在作为流行的 log4j 项目的后续版本,从而恢复 log4j 离开的位置。 另外 slf4j(…

本地Git项目同时推送至GitHub和Gitee

分别在gitee和github新建一个仓库 github: gitee: 添加远程仓库 git remote add origin1 [你的GitHub仓库URL] git remote add origin2 [你的Gitee仓库URL] 在本地中初始化创建一个git本地分支 git init 进入.git目录下修改config文件 [remote "origin"] url g…