React快速入门

最近需要学到react,这里进行一个快速的入门,参考react官网

1.创建和嵌套组件

react的组件封装是个思想,我这里快速演示代码,自己本身也不太熟悉。
代码的路径是src底下的App.js
在这里插入图片描述

function MyButton() {return (<button>I'm a Yeapt's Button</button>);
}function MyApp() {return (<div className={"myApp"}><h1>hello</h1><MyButton/></div>);
}export default MyApp;

小结:这里我对他的理解就是封装一个自定义的按钮,然后在使用的时候包在div里面。

2.使用 JSX 编写标签

刚刚那种包裹式的标签语法被称为JSX,这个必须闭合标签,也不能return多个jsx标签,必须在贡献的父级中,比如 div 或者 空标签包裹

<div></div>
<></>

小结:算是一个对规范的要求,官网很贴心,说:有大量的 HTML 需要移植到 JSX 中,就用在线转换器。

3.添加样式

react设计到样式的修改跟css类似,也是搞个className,然后创建个css样式文件区操作。

我这里试着把按钮改成蓝色,直接创建一个css文件夹,然后在里面写样式,最后引入

import './css/myButton.css';function MyButton() {return (<button className={"myButton"}>I'm a button</button>);
}function MyApp() {return (<div className={"myApp"}><h1>hello</h1><MyButton/></div>);
}export default MyApp;
/* In your CSS */
.myButton {background: cornflowerblue;
}

在这里插入图片描述
小结:目前来看很简单学过css的都会,不知道后续有没有别的引入方式,link应该也是可以的。

4.显示数据

就是一个变量传递,创建对象,显示对象数据,直接上代码。

const user = {name: 'new_baby',imgUrl: 'https://www.baidu.com/img/baidu_sylogo1.gif',imgSize: 90,}function MyButton() {return (<button className={"myButton"}>I'm a button</button>);
}function MyApp() {return (<div className={"myApp"}><h1>hello {user.name}</h1><img src={user.imgUrl} sizes={user.imgSize}/><br/><MyButton/></div>);
}export default MyApp;

在这里插入图片描述
小结:其实就是通过对象去赋值,这种写法更加灵活,涉及前后端交互的时候,数据由后端获取往前端赋值。

5.条件渲染

其实就是if的用法,react没有像vue那样有v-if,但是写法都类似。官网提供了三种表现形式,这里简单展示:

IF语句引入JSX

function MyApp() {let LoginStatus = true;if (LoginStatus) {return (<div className={"myApp"}><h1>hello {user.name}</h1><img src={user.imgUrl} sizes={user.imgSize}/><br/><MyButton/></div>);} else {return (<div>请登录</div>);}
}

下面是两种判断下的界面
在这里插入图片描述
在这里插入图片描述

条件运算符(JSX内部)

直接在div里面进行条件运算,工作与JSX内部。但是在测试过程中f发现有个问题,if或else后只能跟一个组件。

function MyApp() {let loginStatus = false;return (<div className={"myApp"}>{loginStatus ? (<MyButton/>) : (<h1>请登录</h1>)}</div>);
}

逻辑 运算符(内部不需要else)

当你不需要 else 分支时,可以直接用这个,估计用的比较少。

function MyApp() {let loginStatus = false;return (<div className={"myApp"}>{loginStatus && (<MyButton/>)}</div>);
}

小结:if的用法,预计第一种和第二种会用的多一点。第一种好理解,第二种写法简便。

6.渲染列表

这里是后台的重点,一定会用到,就是渲染列表,id作为唯一标识是为了方便做特殊处理,搭配if增加点高级玩法。下面直接展示代码:

const users = [{name: 'Jack', id: 1},{name: 'Hobby', id: 2},{name: 'Tom', id: 3},
]const userItems = users.map(users =><li key={users.id}>{users.name}</li>
);function MyApp() {return (<div className={"myApp"}><ul>{userItems}</ul></div>);
}

改造下定义 userItems

const userItems = users.map(users =><li key={users.id}style={{color:users.isBoy?'black':'red',}}>{users.name}</li>
);

小结:这里在写代码的时候要注意2点:
1.特殊的操作尽可能在组件中即const中完成,不要在return去操作,这样可以低耦合。
2.主键id一定要带上,即使你只是展示。

6.响应事件

简单说就是一些函数,比如按钮的点击事件,这里简单示范下:

function MyButton() {function handleClick(){alert('被你点到了');}return (<button onClick={handleClick}>点我</button>);
}

小结:就注意下事件后面不要加(),并且都是在组件内自己完成的。

7.更新界面

先介绍下这个useState(),是改变状态的开关,将状态添加到函数组件需要4个步骤:启用状态、初始化、读取和更新。

import { useState } from 'react';
function MyButton() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1)}return (<button className={"myButton"} onClick={handleClick}>点击了{count}</button>);
}

小结:useState是react自带的属性后续需要深入了解Hook,count属性每个组件都自己管控不会干扰。

8.组件间共享数据

两个组件之间的数据同步,感觉有点像消息传递,定义局部变量。
官网称之为:按这种方式传递下来的信息被称作 prop。

这里看看代码:

function MyButton({count, onClick, user}) {return (<button className={"myButton"} onClick={onClick}>{user}点击了{count}</button>);
}function MyApp() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1)}return (<div className={"myApp"}><MyButton user={'张三'} count={count} onClick={handleClick}/><MyButton user={'李四'} count={count} onClick={handleClick}/></div>);
}export default MyApp;

在这里插入图片描述

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

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

相关文章

软件开发方法:复用与扩展

软件开发方法&#xff1a;复用与扩展 一、面向对象二、进一步认识 一、面向对象 封装 工程上的意义&#xff1a;屏蔽细节&#xff0c;隔离变化 public、protected、private 继承 工程上的意义&#xff1a;复用 多态工程上的意义&#xff1a;高内聚&#xff0c;低耦合 —— 面…

centos7在线安装 jdk1.8+tomcat+mysql8+nginx+docker

centos7 在线安装jdk1.8 yum install -y java-1.8.0-openjdk.x86_64 java默认安装路径/usr/lib/jvm/&#xff1b; 加入环境变量配置&#xff0c;在/etc/profile 配置文件中加入 java 环境变量&#xff1a; vim /etc/profile ​ #java 环境变量内容&#xff1a; ​ #java环境变量…

poste邮件服务器搭建

关于poste poste是一款开源邮件服务软件&#xff0c;可以很方便的搭建&#xff1a;SMTP IMAP POP3 反垃圾邮件 防病毒 Web 管理 Web 电子邮件&#xff0c;支持以下特性。 SPF、DKIM、DMARC、SRS 的原生实现&#xff0c;带有简单的向导用于检测木马、病毒、恶意软件的防…

密码学学习笔记(二十):DSA签名与X.509证书

数字签名 下图是一个制作以及使用数字签名过程的通用模型。 假设Bob发送一条消息给Alice&#xff0c;尽管消息并不重要&#xff0c;也不需要保密&#xff0c;但他想让Alice知道消息确实是他本人发的。出于这个目的&#xff0c;Bob利用一个安全的散列函数&#xff0c;比如SHA-…

Linux中deluser和userdel的区别

在Linux系统中&#xff0c;deluser 和 userdel 都是用于删除用户账户的命令&#xff0c;但它们来自不同的用户管理工具&#xff0c;具有一些区别&#xff1a; userdel&#xff1a; userdel 是一个较底层的命令&#xff0c;通常用于删除用户账户。它的主要功能是从系统文件&…

uniapp websocket机制 心跳 重连

在开发程序过程中通信功能还是比较常用到的&#xff0c;本文主要介绍的是uniapp中websocket的使用 websocket建立连接后&#xff0c;断开、心跳机制重新链接的一个过程。 关于uni.connectSocket可仔细阅读uniapp官网中的uni.connetSocket以及连接socket创建的实例SocketTask …

POJ 1064 Cable master 二分搜索

一、思路 再本题目中&#xff0c;输入的所有数字都是只有两位小数&#xff0c;输出的答案也是两位小数&#xff0c;为了简单&#xff0c;我直接把每个数字乘以100&#xff0c;变成整数&#xff0c;然后去二分搜索&#xff0c;二分搜素的比较条件为数组所有元素都除以middle&am…

【小梦C嘎嘎——启航篇】vector 以及日常使用的接口介绍

【小梦C嘎嘎——启航篇】vector 日常使用的接口介绍&#x1f60e; 前言&#x1f64c;vector 是什么&#xff1f;vector 比较常使用的接口 总结撒花&#x1f49e; &#x1f60e;博客昵称&#xff1a;博客小梦 &#x1f60a;最喜欢的座右铭&#xff1a;全神贯注的上吧&#xff01…

TypeScript入门指南

TypeScript学习总结内容目录&#xff1a; TypeScript概述 TypeScript特性。Javascript与TypeScript的区别 * TypeScript安装及其环境搭建TypeScript类型声明 * 单个类型声明&#xff0c;多个类型声明 * 任意类型声明 * 函数类型声明 * unknown类型…

css-flex使用

文章目录 flex弹性容器属性flex-directionflex-wrapflex-flowalign-itemsjustify-contentalign-content主轴和侧轴 弹性元素默认大小属性flex-growflex-shrinkalign-selfflex-basisflexorder 高度坍塌flex布局子元素宽度超出父元素 flex 弹性盒&#xff0c;伸缩盒&#xff0c;…

micropython SSD1306/SSD1315驱动

目录 简介 代码 功能 显示ASCII字符 ​编辑 画任意直线 画横线 画竖线 画矩形 画椭圆 画立方体 画点阵图 翻转 反相 滚动 横向滚动 纵向滚动 奇葩滚动 简介 我重新写了一个驱动&#xff0c;增加了一些功能&#xff0c;由于我的硬件是128*64oled单色I2C&#xff0c;我只…

【数据结构】如何用队列实现栈?图文详解(LeetCode)

LeetCode链接&#xff1a;225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09; 本文默认读者已经掌握栈与队列的基本知识 或者先看我的另一篇博客&#xff1a;【数据结构】栈与队列_字节连结的博客-CSDN博客 做题思路 由于我们使用的是C语言&#xff0c;不能直接使用队…

vue中使用html2canvas+jsPDF实现pdf的导出

导入依赖 html2canvas依赖 npm install html2canvasjspdf依赖 npm install jspdfpdf导出 以导出横向&#xff0c;A4大小的pdf为例 规律&#xff1a;1. html2canvas 中&#xff0c;在保持jsPDF中的宽高不变的情况下&#xff0c;设置html2canvas中的 width 和 height 值越小&a…

npm 不是内部或外部命令,也不是可运行的程序或批处理文件。

遇到问题&#xff1a; 1.遇到问题&#xff1a;npm 不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件。 2.遇到问题&#xff1a;或者使用npm安装插件时会出现 XXX\node\node_modules\npm不可用 情况 如下图&#xff1a; 分析问题&#xff1a; nodejs在nodejs官网…

分布式ID

分布式ID 背景Snowflake(雪花算法)背景 分布式系统,用什么做为主键呢? uuid 太长(MySQL官方有明确的建议主键要尽量越短越好[4],36个字符长度的UUID不符合要求。)、 无规律(在InnoDB引擎下,UUID的无序性可能会引起数据位置频繁变动,严重影响性能。)SnowflakeLeaf h…

GO学习之 数据库(mysql)

GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 7、GO学习之 多线程(goroutine) 8、GO学习之 函数(Function) 9、GO学习之 接口(Interface) 10、GO学习之 网络通信(Net/Htt…

【vue3】同个页面引入多个图表组件实现自适应的方法

首先说明&#xff0c;此方案仅针对vue3项目在同一个页面引入了多个图表组件&#xff0c;因为我发现不能框架不同的引入&#xff0c;resize的写法还不同 window.addEventListener("resize", function() {...// 在此处重新调用即可 }以下是具体写法&#xff1a; 循环…

前端实习第五周周记

前言 每一天做了什么还是要记录一下&#xff0c;不然过两天后就会发现&#xff0c;慢慢遗忘自己的收获与做过的东西。 这周做的是医学检验系统的样本库部分。由于是公司的代码所以不能交代具体&#xff0c;那么久聊一下每天具体做了些什么以及我的一些收获。 周一 周一上午…

【C++】四种强制类型转换

内容来自《C Primer&#xff08;第5版&#xff09;》4.11.3 显示转换、6.4 函数重载、19.2.1 dynamic_cast运算符 目录 1. static_cast 2. const_cast 3. reinterpret_cast 4. dynamic_cast 4.1 指针类型的dynamic_cast 4.2 引用类型的dynamic_cast C语言的强制类型转换&…

Unity进阶–通过PhotonServer实现人物选择和多人同步–PhotonServer(四)

文章目录 Unity进阶–通过PhotonServer实现人物选择和多人同步–PhotonServer(四)服务端客户端 Unity进阶–通过PhotonServer实现人物选择和多人同步–PhotonServer(四) 服务端 服务端结构如下&#xff1a; UserModel using System; using System.Collections.Generic; usin…