黑马React18: 基础Part 1

黑马React: 基础1

Date: November 15, 2023
Sum: React介绍、JSX、事件绑定、组件、useState、B站评论


React介绍

概念: React由Meta公司研发,是一个用于 构建Web和原生交互界面的库

Untitled

优势: 1-组件化的开发方式 2-优秀的性能 3-丰富的生态 4-跨平台开发




开发环境搭建

使用create-react-app快速搭建开发环境

create-react-app是一个快速 创建React开发环境的工具,底层由Webpack构建,封装了配置细节,开箱即用

执行命令

npx create-react-app react-basic
  1. npx Node.js工具命令,查找并执行后续的包命令
  2. create-react-app 核心包(固定写法),用于创建React项目
  3. react-basic React项目的名称(可以自定义)

之后切入到文件夹下, 使用 npm start启动项目

Untitled

创建React项目的更多方式: https://zh-hans.react.dev/learn/start-a-new-react-project

工作方式:

Untitled

理解:

index.js项目入口
App.js项目的根组件
index.htmlhtml文件

项目的根组件以React组件的方式渲染到index.html中

  • Code:

    index.js 简化后的内容

    // 项目的入口 从这里开始// React必要的两个核心包
    import React from 'react';
    import ReactDOM from 'react-dom/client';// 导入项目的根组件
    import App from './App';// 把App根组件渲染到id为root的dom节点上
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />
    );
    



JSX基础-概念和本质

什么是JSX

**概念:**JSX是JavaScript和XML(HTML)的缩写,表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式

Untitled

优势:

  1. HTML的声明式模版写法 2. JS的可编程能力

JSX的本质

JSX并不是标准的JS语法,它是JS的语法扩展,浏览器本身不能识别,需要通过解析工具做解析之后才能在浏览器中运行

Untitled



JSX基础-高频场景

JSX中使用JS表达式

在JSX中可以通过 大括号语法{} 识别 JavaScript中的表达式,比如常见的变量、函数调用、方法调用等等

  1. 使用引号传递字符串
  2. 使用JavaScript变量
  3. 函数调用和方法调用
  4. 使用JavaScript对象

注意:if语句、switch语句、变量声明属于语句,不是表达式,不能出现在{}中

案例:

  • Code:

    // 项目的根组件
    // App -> index.js -> public/index.html(root)const count = 100function getName() {return 'jack'
    }function App() {return (<div className="App">this is App{/* 使用引号传递字符串 */}{'this is message'}{/* 识别js变量 */}{count}{/* 函数调用 */}{getName()}{/* 方法调用 */}{new Date().getDate()}{/* 使用js对象 */}<div style={{ color: 'red'}}>this is div</div></div>)
    }export default App
    

效果:

Untitled


JSX中实现列表渲染

**语法:**在JSX中可以使用原生JS中的map方法遍历渲染列表

Untitled

案例:

const list = [{ id: 1001, name: 'Vue'},{ id: 1002, name: 'React'},{ id: 1003, name: 'Angular'}
]function App() {return (<div className="App">this is App{/* 渲染列表 */}<ul>{/* { list.map(item => <li>Vue</li>) } */}{ list.map(item => <li key={item.id}>{ item.name }</li>) }</ul></div>)
}export default App

效果:

Untitled

要点:

1-key值绑定

作用: 提升性能

方式: 每一项要加上一个独一无二的key值


JSX中实现条件渲染

Untitled

**语法:**在React中,可以通过逻辑与运算符&&、三元表达式(?:)实现基础的条件渲染

案例:

const isLogin = truefunction App() {return (<div className="App">{/* 逻辑与 && */}{ isLogin && <span>this is span</span>}{/* 三目运算符 */}{ isLogin ? <span>this is span</span> : <div>this is div</div>}{/* 逻辑或 || */}{ isLogin || <span>this is span</span>}</div>)
}export default App

效果:

this is spanthis is span


JSX中实现复杂条件渲染

Untitled

需求:列表中需要根据文章状态适配三种情况,单图,三图,和无图三种模式

解决方案:自定义函数 + if判断语句

案例:

// 定义文章类型
const articleType = 3  // 0 1 3// 定义核心函数(根据文章类型返回不同的JSX模版)function getArticleTem () {if (articleType === 0) {return <div>我是无图文章</div>} else if (articleType === 1) {return <div>我是单图模式</div>} else {return <div>我是三图模式</div>}
}function App () {return (<div className="App">{/* 调用函数渲染不同的模版 */}{getArticleTem()}</div>)
}export default App

效果:

我是三图模式




React中的事件绑定

React 基础事件绑定

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

Code:

function App() {const handleClick = () => {console.log('button被点击了');}return (<div className="App"><button onClick={handleClick}>Click</button></div>)
}export default App

Res:

Untitled


使用事件对象参数

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

Code:


function App() {const handleClick = (e) => {console.log('button被点击了', e);}return (<div className="App"><button onClick={handleClick}>Click</button></div>)
}export default App

Res:

Untitled


传递自定义参数

语法:事件绑定的位置改成箭头函数的写法,在执行clickHandler实际处理业务函数的时候传递实参

Code:

function App() {const handleClick = (name) => {console.log('button被点击了', name);}return (<div className="App"><button onClick={() => handleClick('jack')}>Click</button></div>)
}export default App

Res:

Untitled

注意:不能直接写函数调用,这里事件绑定需要一个函数引用


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

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

Code:

function App() {const handleClick = (name, e) => {console.log('button被点击了', name, e);}return (<div className="App"><button onClick={(e) => handleClick('jack', e)}>Click</button></div>)
}export default App

Res:

Untitled




React中的组件

组件是什么

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

Untitled

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



React组件

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

Code:

function Button() {return <button>click me!</button> 
}function App() {return (<div className="App">{/* 自闭合 */}<Button />{/* 成对标签 */}<Button></Button></div>)
}export default App

Res:

Untitled




useState

useState基础使用

概念:

useState 是一个 React Hook(函数),它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果

Untitled

本质:和普通变量不同的是,状态变量一旦发生变化组件的视图UI也会跟着变化(数据驱动视图)

const [count, setCount] = useState(0)

1- useState是一个函数, 返回值是一个数组

2-数组中的第一个参数是状态变量, 第二个参数是set函数用来修改状态变量

3-useState的参数将作为count的初始值

Case:

func: 点击按钮, 数值不断增加

Code:

import { useState } from "react"function App() {// 1. 调用 useState 添加一个状态变量// count 状态变量// setCount 修改状态变量的方法const [count, setCount] = useState(0)// 2. 点击事件const handleClick = () => {setCount(count + 1)}return (<div className="App"><button onClick={ () => handleClick()}>Add-{count}</button></div>)
}export default App

Res:

Untitled



修改状态的规则

状态不可变

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

Untitled

Untitled

Case:

Code:

import { useState } from "react"function App() {// 1. 调用 useState 添加一个状态变量// count 状态变量// setCount 修改状态变量的方法const [count, setCount] = useState(0)// 2. 点击事件const handleClick = () => {setCount(count + 1)}return (<div className="App"><button onClick={ () => handleClick()}>Add-{count}</button></div>)
}export default App


修改对象状态

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

直接修改原对象,不引发视图变化

Untitled

调用set传入新对象用于修改

Untitled

理解: 这里先用展开运算符做个拷贝, 然后再用后面重复属性进行替换即可.

Case:

func: 点击按变换名字

Code:

import { useState } from "react"function App() {const [form, setForm] = useState({ name: 'jack' })const handleClick = () => {setForm({...form,name: 'rose'})}return (<div className="App"><button onClick={ () => handleClick()}>Add-{form.name}</button></div>)
}export default App

Res:

Untitled

复习知识点:

1-…展开匀速符: 深浅拷贝问题

展开运算符使用的对象如果只是针对简单的一级基础数据,就是深拷贝;
展开运算符使用的对象内容包含二级或更多的复杂的数据,那就是浅拷贝;




组件的样式处理

组件基础样式方案

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

  1. 行内样式(不推荐)

Untitled

  1. class类名控制

Untitled

Case:

Code:

index.js

import './css/index.css'const style = {color: 'red',fontSize: '20px'
}function App() {return (<div className="App">{/* 行内样式控制 */}<div style={{ color: 'red'}}>this is span</div>{/* 内部样式控制 */}<div style={style}>this is span</div>{/* 外部样式控制 */}<span className='outer'>this is span</span></div>)
}export default App

index.css

.outer {background-color: blue;
}

Untitled




案例:B站评论

效果展示:

Untitled

  1. 渲染评论列表
  2. 删除评论实现
  3. 渲染导航Tab和高亮实现
  4. 评论列表排序功能实现


渲染评论列表

核心思路

  1. 使用useState维护评论列表
  2. 使用map方法对列表数据进行遍历渲染(别忘了加key)

key Code:

const [commentList, setCommentList] = useState([])
<div className="reply-list">{/* 评论项 */}{commentList.map(item => <Item key={item.id} item={item} onDel={handleDel} />)}</div>
</div>


实现评论删除

需求:

  1. 只有自己的评论才显示删除按钮
  2. 点击删除按钮,删除当前评论,列表中不再显示

核心思路

  1. 删除显示 - 条件渲染 2. 删除功能 - 拿到当前项id以id为条件对评论列表做filter过滤

handleDel实现列表过滤

// 删除功能
const handleDel = (id) => {console.log(id)// 对commentList做过滤处理setCommentList(commentList.filter(item => item.rpid !== id))
}

匹配删除 onDel

{/* 条件:user.id === item.user.id */}
{user.uid === item.user.uid &&
<span className="delete-btn" onClick={() => onDel(item.rpid)}>删除
</span>}


渲染Tab+点击高亮实现

需求:点击哪个tab项,哪个做高亮处理

核心思路

点击谁就把谁的type(独一无二的标识)记录下来,然后和遍历时的每一项的type做匹配,谁匹配到就设置负责高亮的类名

Code:

// 导航 Tab 数组
const tabs = [{ type: 'hot', text: '最热' },{ type: 'time', text: '最新' },
]...// tab切换功能
// 1. 点击谁就把谁的type记录下来
// 2. 通过记录的type和每一项遍历时的type做匹配 控制激活类名的显示
const [type, setType] = useState('hot')
const handleTabChange = (type) => {console.log(type)setType(type)// 基于列表的排序if (type === 'hot') {// 根据点赞数量排序 // lodashsetCommentList(_.orderBy(commentList, 'like', 'desc'))} else {// 根据创建时间排序setCommentList(_.orderBy(commentList, 'ctime', 'desc'))}
}...<li className="nav-sort">{/* 高亮类名: active */}{tabs.map(item =><spankey={item.type}onClick={() => handleTabChange(item.type)}className={classNames('nav-item', { active: type === item.type })}>{item.text}</span>)}
</li>


排序功能实现

Untitled

需求:

点击最新,评论列表按照创建时间倒序排列(新的在前),点击最热按照点赞数排序(多的在前)

**核心思路:**把评论列表状态数据进行不同的排序处理,当成新值传给set函数重新渲染视图UI

Code:

method: 采用 lodash 来进行排序处理

// 基于列表的排序
if (type === 'hot') {// 根据点赞数量排序 // lodashsetCommentList(_.orderBy(commentList, 'like', 'desc'))
} else {// 根据创建时间排序setCommentList(_.orderBy(commentList, 'ctime', 'desc'))
}


classnames优化类名控制

classnames是一个简单的JS库,可以非常方便的通过条件动态控制class类名的显示

Untitled

现在的问题:字符串的拼接方式不够直观,也容易出错

Untitled

理解: classNames 是一个可以执行的方法, key用来控制类型, value用来控制条件




参考:

React:

React入门到实战导学课程_哔哩哔哩_bilibili

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

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

相关文章

linux mount命令加速

一般远程mount 的用法如下&#xff1a; #mount 远程ip:远程目录 本地目录 //如果本地目录不存在需要创建 mount 192.168.110.111:/home/caixxx /home/cym 但是该命令默认使用的协议是nfs4&#xff0c;这个协议如果读写块大小参数设置的不合适&#xff0c;mount后读取远程目…

SpringBoot中日志的使用log4j

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

vulhub redis-4-unacc

环境搭建 cd vulhub/redis/4-unacc docker-compose up -d 漏洞复现 检测 redis-cli -h ip 使用redis工具 工具地址&#xff1a;https://github.com/vulhub/redis-rogue-getshell 下载完成后&#xff0c;先进入RedisModulesSDK/exp/ 目录进行make操作 获得exp.so后可以进行…

【开发流程】持续集成、持续交付、持续部署

一、开发工作流程 假设把开发流程分为以下几个阶段&#xff1a; 编码 -> 构建 -> 集成 -> 测试 -> 交付 -> 部署 如上图所示&#xff0c;持续集成、持续交付、持续部署有着不同的软件自动交付周期。 二、持续集成、持续交付、持续部署 1、持续集成 持续集成…

服务器数据恢复—热备盘同步中断导致Raid5数据丢失的数据恢复案例

服务器数据恢复环境&#xff1a; 某单位一台服务器上有一组raid5阵列&#xff0c;该raid5阵列有15块成员盘。上层是一个xfs裸分区&#xff0c;起始位置是0扇区。 服务器故障&检测&#xff1a; 服务器raid5阵列中有硬盘性能表现不稳定&#xff0c;但是由于管理员长时间没有关…

C++中的this指针

C中的this指针 this 实际上是成员函数的一个形参&#xff0c;在调用成员函数时将对象的地址作为实参传递给 this。不过 this 这个形参是隐式的&#xff0c;它并不出现在代码中&#xff0c;而是在编译阶段由编译器默默地将它添加到参数列表中。 this指针是类的指针&#xff0c…

SpringBoot 集成 RocketMQ

一、RocketMQ基本概念 消息模型&#xff08;Message Model&#xff09; RocketMQ主要由Producer、Broker、Consumer三部分组成&#xff0c;其中Producer负责生产消息&#xff0c;Consumer负责消费消息&#xff0c;Broker负责存储消息。Broker在实际部署过程中对应一台服务器&…

nodejs+vue实验室上机管理系统的设计与实现-微信小程序-安卓-python-PHP-计算机毕业设计

用户&#xff1a;管理员、教师、学生 基础功能&#xff1a;管理课表、管理机房情况、预约机房预约&#xff1b;权限不同&#xff0c;预约类型不同&#xff0c;教师可选课堂预约和个人&#xff1b;课堂预约。 在实验室上机前&#xff0c;实验室管理员需要对教务处发来的上机课表…

浅析AcrelEMS-CIA机场智慧能源管平台解决方案-安科瑞 蒋静

1 概述 机场智慧能源管平台解决方案对机场范围内变电站内的高低压配电设备 、 发电机、变压器 、UPS、EPS 、广场照明 、 室内照明 、通风及排水等机电设备进行实时分布式监控和集中管理 , 实现无人值守 , 确保高速公路安全畅通 , 提高 自动化管理水平 , 降低机电设备的运行维…

k8s运维管理

node管理 node隔离与恢复 1.使用patch命令 #实现node隔离调度 kubectl patch node node1 -p {"spec":{"unschedulable":true}} #节点信息多了一项SchedulingDisabled node1 Ready,SchedulingDisabled <none> 7d3h v1.18.20 #解除 kubectl …

C语言二叉树的建立和遍历

tree.h typedef struct TreeNode_s {char val;//数据域struct TreeNode_s *pLeft;//左结点struct TreeNode_s *pRight;//右边结点 } TreeNode_t, *pTreeNode_t;//辅助队列建立二叉树 typedef struct QueueNode_s {pTreeNode_t NodeAddr; //数据域存储一个二叉树结点的地址 str…

SpringBoot常见注解

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a;每天一个知识点 ✨特色专栏&#xff1a…

程序员告诉你:人工智能是什么?

随着科技的快速发展&#xff0c;人工智能这个词汇已经逐渐融入了我们的日常生活。然而&#xff0c;对于大多数人来说&#xff0c;人工智能仍然是一个相对模糊的概念。 首先&#xff0c;让我们从人工智能的定义开始。人工智能是一种模拟人类智能的技术&#xff0c;它涵盖了多个领…

C++中将 sizeof() 用于类

C中将 sizeof() 用于类 您知道&#xff0c;通过使用关键字 class 声明自定义类型&#xff0c;可封装数据属性和使用数据的方法。运算符 sizeof( )用于确定指定类型需要多少内存&#xff0c;单位为字节。这个运算符也可用于类&#xff0c;在这种情况下&#xff0c;它将指出类声…

flink入门

1.安装flink&#xff0c;启动flink 文档地址&#xff1a;Apache Flink 1.3-SNAPSHOT 中文文档: Apache Flink 中文文档 代码&#xff1a;GitHub - apache/flink: Apache Flink 2. 打开端口 端口号&#xff0c; 启动jar ### 切换到flink 目录bin下 [rootlocalhost ~]# cd /…

参考文献格式

目录 期刊会议预印本&#xff08;如arxiv&#xff09; 期刊 找不到页码可以在文献中查看bibtex格式&#xff0c;其中有 外文期刊可在web of science中查找卷号、期号和所在页数&#xff1a; [1] ZHANG F, HU Z Q, FU Y K, et al. A New Identification Method for Surface …

python 词云 wordcloud使用paddle模式 庆余年人物分析--不是特别准,可以看着玩一玩

看完之后你也可以生成自己的词云 提供一个过滤人名的英中词性分析对应&#xff0c;更多的可以去我的码云上看看 https://gitee.com/billion_lines_of_code/learn-wordcloud # 只过滤人名 En2Cn_name {nr: 名词-人名,nr1: 名词-汉语姓氏,nr2: 名词-汉语名字,nrf: 名词-音译人…

【0到1学习Unity脚本编程】第一人称视角的角色控制器

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;【0…

图像滤波处理

滤波处理是图像处理中常用的技术之一&#xff0c;用于去除图像中的噪声、平滑图像、边缘检测等。以下是几种常见的滤波处理方法&#xff1a; 1. 均值滤波 (Mean Filtering) 原理&#xff1a; 均值滤波使用一个固定大小的滤波器&#xff0c;在图像上滑动并取周围像素的平均值来…

ClickHouse SQL 查询优化

1 单表查询 1.1 Prewhere替代where Prewhere和where语句的作用相同&#xff0c;用来过滤数据。不同之处在于prewhere只支持 *MergeTree 族系列引擎的表&#xff0c;首先会读取指定的列数据&#xff0c;来判断数据过滤&#xff0c;等待数据过滤之后再读取select 声明的列字段来补…