【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.mzph.cn/news/149328.shtml

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

相关文章

CentOS安装nodejs

查看可安装的版本 dnf module list nodejs选择需要版本安装 dnf module install nodejs:<stream>查看版本

67基于matlab图像处理,包括颜色和亮度调整、翻转功能、空间滤波和去噪、频域滤波和去噪、噪声添加,形态学操作、边缘检测及示波器集成的GUI图像处理。

基于matlab图像处理&#xff0c;包括颜色和亮度调整、翻转功能、空间滤波和去噪、频域滤波和去噪、噪声添加&#xff0c;形态学操作、边缘检测及示波器集成的GUI图像处理。数据可更换自己的&#xff0c;程序已调通&#xff0c;可直接运行。 67 matlab图像处理图像降噪 (xiaohon…

vue安装three.js并创建第一个入门场景

vue安装three.js&#xff0c;并创建第一个入门场景 安装three.js npm install --save three引入three.js import * as THREE from threethree.js结构 three.js坐标 创建一个场景 scene场景&#xff0c;camera相机&#xff0c;renderer渲染器 创建一个场景 this.scene new T…

C#入门(1):程序结构、数据类型

一、C#程序结构 第一个C#程序 using System;namespace base_01 {class Program{#region 代码折叠块static void Main(string[] args){//控制台输出Console.WriteLine("Hello World!");Console.Write("C#是微软的编程语言"); //不换行输出//Console.Rea…

Pikachu漏洞练习平台之SSRF(服务器端请求伪造)

注意区分CSRF和SSRF&#xff1a; CSRF&#xff1a;跨站请求伪造攻击&#xff0c;由客户端发起&#xff1b; SSRF&#xff1a;是服务器端请求伪造&#xff0c;由服务器发起。 SSRF形成的原因大都是由于服务端提供了从其他服务器应用获取数据的功能&#xff0c;但又没有对目标…

canal1.1.7实战

1.环境搭建 canal可以用来监听mysql数据库的变化&#xff0c;用来同步数据 先下载最新的部署版本&#xff0c;release地址:Releases alibaba/canal GitHub 包下载地址: https://github.com/alibaba/canal/releases/download/canal-1.1.7/canal.deployer-1.1.7.tar.gz 下载…

前端uniapp列表下拉到底部加载下一页列表【下拉加载页面/带源码/实战】

目录 一. 图片1.2. 二.list.vue三.uni-load-more.vue最后 一. 图片 1. 2. 二.list.vue <template><view><!--列表--><scroll-view scroll-y"true" class"scroll-Y" :style"height: scrollviewHigh px;" lower-threshol…

设计模式(二)-创建者模式(3)-抽象工厂模式

一、为什么需要抽象工厂模式&#xff1f; 在工厂模式中&#xff0c;我们需要定义多个继承于共同工厂抽象基类的工厂子类&#xff0c;这些子类负责创建一个对应的对象。工厂模式存在一个缺点就是&#xff1a;每次扩展新的工厂子类&#xff0c;就会增加系统的复杂度。 如果我们…

TP_Link WR886N 硬改闪存16M内存64M,刷入openwrt

一、换内存&#xff0c;拆闪存&#xff1a; 1、先原机开机试试是否功能正常&#xff1b; 2、拆机&#xff0c;比较难拆&#xff0c;容易坏外壳&#xff1b; 3、找到内存和闪存&#xff0c;用胶带把边上的小元件&#xff0c;电阻都贴好&#xff1b; 4、加助焊油&#xff0c;用风…

PC3329L DC-DC降压 10V-100V输入3A大流输出带EN功能实现零功耗只需极少元器件

1. PC3392L特性  通过使能脚关断实现零功耗  宽电压输入范围 10V 至 100V  最大输出电流 3A  集成功率 MOS 管  外围器件少  输出短路保护  温度保护  逐周期限流  输出电压灵活可靠  ESOP8 2. 描述 PC3392L 一款宽电压范围降压型 DC-DC 电源管…

C# 实现腾讯云多路直播流的云端混合录制

目录 应用场景 腾讯云直播和云点播 产品架构 混流显示示例 关键代码 API实现 小结 应用场景 在云考试或视频面试中&#xff0c;除了对考生、考官的实时音视频监控以防止作弊行为的发生以外&#xff0c;对直播流的音视频录制也尤为重要&#xff0c;可做为后期证据材料进…

斯坦福机器学习 Lecture2 (假设函数、参数、样本等等术语,还有批量梯度下降法、随机梯度下降法 SGD 以及它们的相关推导,还有正态方程)

假设函数定义 假设函数&#xff0c;猜一个 x->y 的类型&#xff0c;比如 y ax b&#xff0c;随后监督学习的任务就是找到误差最低的 a 和 b 参数 有时候我们可以定义 x0 1&#xff0c;来让假设函数的整个表达式一致统一 如上图是机器学习中的一些术语 额外的符号&#xf…

spring boot加mybatis puls实现,在新增/修改时,对某些字段进行处理,使用的@TableField()

1.先说场景&#xff0c;在对mysql数据库表数据插入或者更新时都得记录时间和用户id 传统实现有点繁琐&#xff0c;这里还可以封装一下公共方法。 2.解决方法&#xff1a; 2.1&#xff1a;使用aop切面编程&#xff08;记录一下&#xff0c;有时间再攻克&#xff09;。 2.2&…

宝塔站点配置

我这里使用的thinkphp 框架部署的

SaleSmartly新增AI意图识别触发器!让客户享受更精准的自动化服务

AI意图识别技术是对话式AI中很重要的组成部分&#xff0c;通俗点来说就是一种可以识别用户在对话中表达的意图的技术。通过对大量数据的分析和学习&#xff0c;AI可以理解用户想要获得的信息&#xff0c;并根据这些信息来采取相应的行动或提供相应的响应。而在对话式AI中&#…

手机LiDAR-based激光雷达标定板提高无人汽车智能化程度

手机LiDAR-based 3D扫描和建模测试系统是一种利用激光雷达&#xff08;LiDAR&#xff09;技术进行三维扫描和模型创建的工具&#xff0c;它可以在手机上运行。这种测试系统可以用于各种应用&#xff0c;如地形测绘、建筑物建模、机器人视觉、无人驾驶汽车导航等。 手机LiDAR-ba…

云端援手:智能枢纽应对数字资产挑战 ——华为云11.11应用集成管理与创新专区优惠限时购

现新客3.96元起&#xff0c;下单有机会抽HUAWEI P60 Art 福利仅限双十一 机会唾手可得&#xff0c;立即行动&#xff01; 「有效管理保护应用与数据的同时实现高效互通」——华为云全力满足企业需求&#xff0c;推出全套「应用集成管理与创新」智能解决方案&#xff1a;华为云…

家电电器展示预约小程序的作用是什么

电器产品已经成为人们生活的必备品&#xff0c;如冰箱、电视机、洗衣机等&#xff0c;而这些产品的购买方式也很多&#xff0c;可以到线下门店购买&#xff0c;也可以到线上多个电商平台购买&#xff0c;如今互联网高速发展以及民众享受线上服务带来的便捷性&#xff0c;同时商…

SSL证书对网站SEO的好处

随着网络安全意识的提高&#xff0c;越来越多的网站开始采用SSL证书来保护自己的数据传输过程。那么&#xff0c;SSL证书真的能为网站SEO带来好处吗&#xff1f;下面将为您分析这个问题。 加强用户体验和信任度 SSL证书不仅能确保数据传输的安全性&#xff0c;还能让客户感受…

『亚马逊云科技产品测评』活动征文|基于next.js搭建一个企业官网

『亚马逊云科技产品测评』活动征文&#xff5c;基于next.js搭建一个企业官网 授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方…