前端react入门day02-React中的事件绑定与组件

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

目录

React中的事件绑定

React 基础事件绑定

使用事件对象参数 

传递自定义参数 

同时传递事件对象和自定义参数 

React中的组件 

组件是什么

React组件

useState 

修改状态的规则

状态不可变

修改对象状态

组件的样式处理

classnames优化类名控制 


React中的事件绑定

React 基础事件绑定

语法: on + 事件名称 = { 事件处理程序 } ,整体上遵循驼峰命名法

使用事件对象参数 

语法:在事件回调函数中设置形参e

传递自定义参数 

语法:事件绑定的位置改造 成箭头函数的写法 ,在执行clickHandler实际处理业务函数的时候传递实参
注意:不能直接写函数调用,这里事件绑定需要一个 函数引用

同时传递事件对象和自定义参数 

语法:在事件绑定的位置传递事件实参e和自定义参数,clickHandler中声明形参,注意顺序对应

React中的组件 

组件是什么

概念:一个组件就是用户界面的一部分,它可以有自己的逻辑和外观,组件之间可以互相嵌套,也可以复用多次

组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用

React组件

在React中,一个组件就是 首字母大写的函数 ,内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件 当成标签书写 即可

useState 

useState 是一个 React Hook(函数),它允许我们向组件添加一个 状态变量 , 从而控制影响组件的渲染结果
本质:和普通JS变量不同的是,状态变量一旦发生变化组件的视图UI 也会跟着变化 (数据驱动视图)
// useState实现一个计数器按钮
import { useState } from 'react'
function App () {// 1. 调用useState添加一个状态变量// count 状态变量// setCount 修改状态变量的方法const [count, setCount] = useState(0)// 2. 点击事件回调const handleClick = () => {// 作用: // 1. 用传入的新值修改count// 2. 重新使用新的count渲染UIsetCount(count + 1)}return (<div><button onClick={handleClick}>{count}</button></div>)
}export default App

修改状态的规则

状态不可变

在React中,状态被认为是只读的,我们应该始终 替换它而不是修改它, 直接修改状态不能引发视图更新
       

修改对象状态

 规则:对于对象类型的状态变量,应该始终传给set方法一个全新的对象来进行修改

  

      直接修改原对象,不引发视图变化                        调用set传入新对象用于修改

组件的样式处理

React组件基础的样式控制有俩种方式

1. 行内样式(不推荐)
2. class类名控制
         
              index.css                                                        App.js

classnames优化类名控制 

classnames是一个简单的JS库,可以非常方便的 通过条件动态控制class类名的显示
现在的问题:字符串的拼接方式不够直观,也容易出错

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

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

相关文章

nvm安装步骤

注意事项 不要安装任何版本的node.js&#xff0c;有的话卸载干净&#xff01;注意&#xff1a;要卸载干净了&#xff01; 安装步骤&#xff1a; nvm下载 点击exe文件安装 安装目录选择&#xff1a;D:\NVM 下一步创建nodejs文件放在D:\NVM 下&#xff0c;然后一直next到最后 …

亿咖通·天穹Pro行泊一体智能驾驶计算平台正式量产

全球出行科技公司亿咖通科技宣布&#xff0c;旗下首款智能驾驶计算平台——亿咖通•天穹Pro行泊一体智能驾驶计算平台&#xff08;以下简称“该平台”&#xff09;已向车企正式量产交付。作为亿咖通科技在智能驾驶领域的全新突破&#xff0c;亿咖通•天穹Pro智能驾驶计算平台以…

柯桥专升本学校,自考本科文凭的价值如何?

自考本科文凭的价值如何&#xff1f; 自考本科学历是通过独立学习和考试获得的一种本科学历。对于自考本科学历的价值&#xff0c;很多人感到困惑&#xff0c;那么究竟自考本科学历有多大的价值呢? 首先&#xff0c;在就业市场上&#xff0c;自考本科学历具有一定的竞争力。随…

WPF RelativeSource属性-目标对象类型易错

上一篇转载了RelativeSource的三种用法&#xff0c;其中第二种用法较常见&#xff0c;这里记录一下项目中曾经发生错误的地方&#xff0c;以防自己哪天忘记了&#xff0c;又犯了同样错误—WPF RelativeSource属性-CSDN博客 先回顾一下&#xff1a; 控件关联其父级容器的属性—…

iOS实现弹簧放大动画

效果图 实现代码 - (void)setUpContraints {CGFloat topImageCentery (SCREEN_HEIGHT - 370 * PLUS_SCALE) / 2;[self.topIconView mas_makeConstraints:^(MASConstraintMaker *make) {make.centerX.mas_equalTo(0);make.centerY.equalTo(self.view.mas_top).with.offset(t…

本地仓库转为git仓库推送到gitee

通常有两种获取 Git 项目仓库的方式&#xff1a; 方式一&#xff1a;将尚未进行版本控制的本地目录转换为 Git 仓库&#xff1b; 方式二&#xff1a;从其它服务器 克隆 一个已存在的 Git 仓库。 两种方式都会在你的本地机器上得到一个工作就绪的 Git 仓库。 方式一&#xff1a…

【Linux进程】先谈硬件—冯诺依曼体系结构

目录 冯诺依曼体系 冯诺依曼体系结构 冯诺依曼体系的工作流程 为什么一个程序要运行&#xff0c;必须的先加载到内存中运行? 从软件数据流角度理解冯诺依曼 冯诺依曼体系结构 我们常见的计算机&#xff0c;如笔记本。我们不常见的计算机&#xff0c;如服务器&#xff0c…

Android NDK开发详解之JNI中的库文件

Android NDK开发详解之JNI中的库文件 简介工作原理流程原生 activity 和应用 简介 本部分简要介绍了 NDK 的工作原理。Android NDK 是一组使您能将 C 或 C&#xff08;“原生代码”&#xff09;嵌入到 Android 应用中的工具。能够在 Android 应用中使用原生代码对于想执行以下…

XML External Entity-XXE-XML实体注入

XML 实体? XML 实体允许定义标签,在解析 XML 文档时这些标签将被内容替换。一般来说,实体分为三种类型: 内部实体 外部实体 参数实体。 必须在文档类型定义(DTD)中创建实体 一旦 XML 文档被解析器处理,它将js用定义的常量“Jo Smith”替换定义的实体。正如您所看到…

获取Webshell方法

CMS系统指的是内容管理系统。已经有别人开发好了整个网站的前后端&#xff0c;使用者只需要部署cms&#xff0c;然后通过后台添加数据&#xff0c;修改图片等工作&#xff0c;就能搭建好一个的WEB系统。 CMS获取Webshell方法 WordPress后台拿Webshell phpcms拿Webshell 非CMS…

IDEA优雅自动生成类注释和快捷键生成方法注释

生成类注释 Preferences->Editor->File and Code Templates-> Includes ->File Header 注释模板&#xff1a; /*** Classname ${NAME}* Description ${description}* Date ${DATE} ${TIME}* Created by ZouLiPing*/生成方法和字段注释 查看IDEA自动配置java快捷…

企业如何在自媒体平台推广

自媒体是企业宣传品牌的平台之一&#xff0c;在自媒体平台上企业能够较为自由的决定文案内容发布时间&#xff0c;同时后台也会有专门的数据分析帮助企业了解每一次推广效果&#xff0c;成本可控、数据可查、效果可追踪&#xff0c;还能与用户或者潜在用户互动&#xff0c;进行…

C#学习系列之密闭类、接口、结构和类

C#学习系列之密闭类、接口、结构和类 啰嗦密闭类接口结构和类总结 啰嗦 基础学习 密闭类 类似string这种不想再继续继承和修改下去&#xff0c;使用sealed声明。 派生类中用sealed和override&#xff0c;无法继续重写。 接口 接口就是指定一组函数成员&#xff0c;而不实现…

疑难杂症-暂时不能解析域名“mirrors.tuna.tsinghua.edu.cn”

可能是太久没用Ubuntu了&#xff0c;总是有一些莫名其妙的问题 我的方法简单粗暴&#xff1a;不需要重启&#xff0c;打开终端&#xff0c;输入sudo apt-get update&#xff0c;解析成功 还有一些别的方法&#xff0c;不过我也没试过 修改/etc/resolv.conf还是修改/etc/resol…

商家为什么要做霸王餐,外卖霸王餐赚钱吗?

霸王餐是什么&#xff1f; 外卖霸王餐是外卖商家为了在外卖平台(美团外卖/饿了么/抖音外卖)增加销量&#xff0c;增加评分&#xff0c;优化评价的一种让利营销手段。 举个栗子&#x1f330;:外卖商家将正常销售的套餐(菜品)拿出一部分通过霸王餐平台让潜在消费者抢名额&#xf…

大厂面试题-什么是服务网格?

概述 服务网格这个概念出来很久了&#xff0c;从2017年被提出来&#xff0c;到2018年正式爆发&#xff0c;很多云厂商和互联网企业都在纷纷向服务网格靠拢。像蚂蚁集团、美团、百度、网易等一线互联网公司&#xff0c;都有服务网格的落地应用。 服务网格是微服务架构的更进一…

数组行和列的计算

数组行和列的计算 数组行大小的计算 sizeof(array)/sizeof(array[0]) # 数组的大小除以第一行的大小 数组列大小的计算 sizeof(array[0])/sizeof(array[0][0]) # 第一行的大小除以第一个元素的大小

【开题报告】基于SpringBoot的研究生管理系统的设计与开发

1.研究背景 研究生教育是高等教育体系中的重要组成部分&#xff0c;对于培养高层次、高水平的专业人才和推动科学研究具有重要意义。研究生管理是保证研究生培养质量和提升研究生培养工作效率的关键环节。然而&#xff0c;传统的研究生管理方式存在一些问题&#xff0c;如信息…

面试算法49:从根节点到叶节点的路径数字之和

题目 在一棵二叉树中所有节点都在0&#xff5e;9的范围之内&#xff0c;从根节点到叶节点的路径表示一个数字。求二叉树中所有路径表示的数字之和。例如&#xff0c;图8.4的二叉树有3条从根节点到叶节点的路径&#xff0c;它们分别表示数字395、391和302&#xff0c;这3个数字…

万物摩尔定律:人工智能技术的快速迭代将使人类万劫不复?

第一次工业革命&#xff1a;蒸汽机时代&#xff1b; 第二次工业革命&#xff1a;电气化时代&#xff1b; 第三次工业革命&#xff1a;信息化时代&#xff1b; 第四次工业革命&#xff1a;智能化革命。这一场革命正在上演&#xff0c;是人工智能&#xff08;AI&#xff09;带…