【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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

公寓水电管理系统

springbootmybatisthymeleaf 这次练习是尝试将layer与系统结合起来,将新增、修改、删除都和弹窗结合起来。 一、需求分析 二、数据库 三、模块 1、登录页面 哈哈哈,之前做的登录页面都好丑,这是目前做的最好看的一次了。 超级管理员&…

Java 教育局民办教育信息服务与监管平台

1) 项目背景 按照《中华人民共和国民办教育促进法》和《中华人民共和国政府信息公开条例》的相关规定,为满足学生和家长、社会各界获取权威信息的需求,着力解决服务老百姓最后一公里问题,达到宣传民办教育和引导家长择校的效果&#xff0…

Java实现图书管理系统

今天与大家分享的是一个图书管理系统,这里我们运用的是java基础的语法其中包括类和对象、继承、封装、多态、抽象类、接口还有数组等。 我们需要实现一个可以进行管理员操作和用户操作的图书管理系统,其中包括了管理员操作(查找,添加&#x…

SpringBoot中日志的使用log4j

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

定点整数、小数

文章目录 一、定点整数二、定点小数三、定点小数的加/减运算 一、定点整数 二、定点小数 三、定点小数的加/减运算 对两个定点小数A、B进行加法/减法时,需要先转换为补码 计算机硬件如何做定点小数补码的加法:从最低位开始,按位相加&#x…

栈与队列:设计循环队列

目录 题目🔥: 数据模型: 本题大意: 思路分析: 代码分析: 一、定义队列 二、初始化、判断队列的空和满⭐ 初始化: 空满的判断: 三、入队和出队🎇 入队&…

Vue中实现div的任意移动

前言 在系统应用中,像图片,流程预览及打印预览等情况,当前视窗无法全部显示要预览的全部内容,设置左右和上下滚动条后,如果用鼠标拖动滚动条,又不太便利,如何用鼠标随意的移动呢? …

前端面试:如何实现并发请求数量控制?

题目:实现一个并发请求函数concurrencyRequest(urls, maxNum) 要求如下: 要求最大并发数 maxNum;每当有一个请求返回,就留下一个空位,可以增加新的请求;所有请求完成后,结果按照 urls 里面的顺序依次打出;…

.babyk勒索病毒解析:恶意更新如何威胁您的数据安全

导言: 在数字时代,威胁不断进化,其中之一就是.babyk勒索病毒。这种病毒采用高级加密算法,将用户文件锁定,并要求支付赎金以获取解密密钥。本文91数据恢复将深入介绍.babyk勒索病毒的特点、如何应对被加密的数据&#…

【Promise12数据集】Promise12数据集介绍和预处理

【Segment Anything Model】做分割的专栏链接,欢迎来学习。 【博主微信】cvxiayixiao 本专栏为公开数据集的介绍和预处理,持续更新中。 要是只想把Promise12数据集的raw形式分割为png形式,快速导航,直接看2,4标题即可 …

arcgis属性表十进制度转换成度分秒格式--转换坐标注记法

1、有一组点数据,如下: 2、为其添加XY坐标,如下: 打开属性表,可得到对应点的XY的十进制度坐标,如下: 3、将十进制度转换成度分秒格式,如下,使用转换坐标注记法工具&#…

FPGA实现平衡小车(文末开源!!)

FPGA平衡小车 一. 硬件介绍 底板资源: TB6612电机驱动芯片 * 2 MPU6050陀螺仪 WS2812 RGB彩色灯 * 4 红外接收头 ESP-01S WIFI 核心板 微相 A7_Lite Artix-7 FPGA开发板 电机采用的是平衡小车之家的MG310(GMR编码器)电机。底板上有两个TB6612芯片,可以驱动…

云原生微服务-理论篇

文章目录 分布式应用的需求分布式架构治理模式演进ESB 是什么?微服务架构 MSA微服务实践细节微服务治理框架sidercar 什么是service mesh?康威定律微服务的扩展性什么是MSA 架构?中台战略和微服务微服务总体架构组件微服务网关服务发现与路由…

【GUI】-- 10 贪吃蛇小游戏之静态面板绘制

GUI编程 04 贪吃蛇小游戏 4.1 第一步:先绘制一个静态的面板 首先,需要新建两个类,一个StartGame类作为游戏的主启动类;一个GamePanel类作为游戏的面板类。此外,再新建一个Data类作为数据中心(存放了小蛇各部分图像的…

Halcon (5):Halcon Solution Guide I basics 导论解析

文章目录 文章专栏前言文章目录翻译文档的说明 结论LOL比赛结局 文章专栏 Halcon开发 前言 今天开始看Halcon的官方文档。由于市面上的教学主要是以基础的语法,算子简单介绍为主。所以我还是得看官方的文本。别的不多说了。有道词英语词典,启动。 还有…

LeetCode【36】有效的数独

题目: 思路: https://blog.51cto.com/u_15072778/3788083 代码: public boolean isValidSudoku(char[][] board) {// 二维数组第一个标识 0-9行,第二个表示 0-9数字,存的内容boolean 表示第0-9行,0-9这些…

react之基于@reduxjs/toolkit使用react-redux

react之基于reduxjs/toolkit使用react-redux 一、配置基础环境二、使用React Toolkit 创建 counterStore三、为React注入store四、React组件使用store中的数据五、实现效果六、提交action传递参数七、异步状态操作 一、配置基础环境 1.使用cra快速创建一个react项目 npx crea…

摩根看好的前智能硬件头部品牌双11交易数据极度异常!——是模式创新还是饮鸩止渴?

文 | 螳螂观察 作者 | 李燃 双11狂欢已落下帷幕,各大品牌纷纷晒出优异的成绩单,摩根士丹利投资的智能硬件头部品牌凯迪仕也不例外。然而有爆料称,在自媒体平台发布霸榜各大榜单喜讯的凯迪仕智能锁,多个平台数据都表现出极度异常…

EEPROM与Flash的区别

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

Apache ECharts简介

二十九、Apache ECharts 29.1 介绍 Apache ECharts 是一款基于 JavaScript 的数据可视化图表库,提供直观、生动、可交互、可个性化定制的数据可视化图表。 官网地址:https://echarts.apache.org/zh/index.html 常见效果展示: 1). 柱形图 …
最新文章