黑马React18: 基础Part 1

news2024/10/6 22:32:00

黑马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 = 100

function 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 = true

function 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') {
    // 根据点赞数量排序 
    // lodash
    setCommentList(_.orderBy(commentList, 'like', 'desc'))
  } else {
    // 根据创建时间排序
    setCommentList(_.orderBy(commentList, 'ctime', 'desc'))
  }
}

...

<li className="nav-sort">
  {/* 高亮类名： active */}
  {tabs.map(item =>
    <span
      key={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') {
  // 根据点赞数量排序 
  // lodash
  setCommentList(_.orderBy(commentList, 'like', 'desc'))
} else {
  // 根据创建时间排序
  setCommentList(_.orderBy(commentList, 'ctime', 'desc'))
}

classnames优化类名控制

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

Untitled

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

Untitled

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

参考:

React：

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

鸿蒙ToastDialog内嵌一个xml页面会弹跳到一个新页面《解决》

鸿蒙ToastDialog内嵌一个xml页面会弹跳到一个新页面《解决》

ToastDialog 土司组件 1.问题展示2.代码展示3.问题分析 1.问题展示 0.理想效果 错误效果: 1.首页展示页面 (未点击按钮前) 2.点击按钮之后&#xff0c;弹窗不在同一个位置 2.代码展示 1.点击按钮的 <?xml version"1.0" encoding"utf-8"?> <…
阅读更多...
Jmeter 如何监控目标服务的系统资源

Jmeter 如何监控目标服务的系统资源

下载Jmeter插件管理下载 perfmon 将这个插件管理放到Jmeter的\lib\ext目录下 然后重启Jmeter jmeter-plugins-manager-1.10.jar 下载 perfmon插件 添加 io 内存 磁盘的监听 并且添加监听 在宿主机中安装代理监听程序 并启动 ServerAgent.tar.gz
阅读更多...
Linux常用命令——bzcat命令

Linux常用命令——bzcat命令

在线Linux命令查询工具 bzcat 解压缩指定的.bz2文件 补充说明 bzcat命令解压缩指定的.bz2文件&#xff0c;并显示解压缩后的文件内容。保留原压缩文件&#xff0c;并且不生成解压缩后的文件。 语法 bzcat(参数)参数 .bz2压缩文件&#xff1a;指定要显示内容的.bz2压缩文…
阅读更多...
任正非说：公司要逐步实行分灶吃饭，我们在管理上不能过于整齐划一，否则缺少战斗力。

任正非说：公司要逐步实行分灶吃饭，我们在管理上不能过于整齐划一，否则缺少战斗力。

你好&#xff01;这是华研荟【任正非说】系列的第42篇文章&#xff0c;让我们聆听任正非先生的真知灼见&#xff0c;学习华为的管理思想和管理理念。 一、我们必须在混沌中寻找战略方向。规划就是要抓住机会点&#xff0c;委员会是火花荟萃的地方&#xff0c;它预研的方向是可做…
阅读更多...
贝加莱MQTT功能

贝加莱MQTT功能

贝加莱实现MQTT Client端的功能库和例程 导入库和例程&#xff0c;AS Logical View中分别通过Add Object—Library&#xff0c;Add—Program插入MQTT库和例程。 将例程Sample放置于CPU循环周期中 定义证书存放路径&#xff0c;在AS Physical View 中&#xff0c;右击PLC—Con…
阅读更多...
聚观早报 |零跑C10亮相广州车展；小鹏X9亮相广州车展

聚观早报 |零跑C10亮相广州车展；小鹏X9亮相广州车展

【聚观365】11月18日消息 零跑C10亮相广州车展 小鹏X9亮相广州车展 坦克700 Hi4-T开启预售 超A级家轿五菱星光正式预售 哪吒汽车发布山海平台2.0 零跑C10亮相广州车展 零跑汽车首款全球车型C10在广州车展首次亮相&#xff0c;同时该车也是零跑LEAP 3.0技术架构下的首款全…
阅读更多...
C++菜鸟日记2

C++菜鸟日记2

关于getline()函数&#xff0c;在char和string输入的区别 参考博客 1.在char中的使用&#xff1a; 2.在string中的使用&#xff1a; 关于char字符数组拼接和string字符串拼接方法 参考博客 字符串拼接方法&#xff1a; 1.直接用 号 2.利用append&#xff08;&#xff0…
阅读更多...
【草料】uni-app ts vue 小程序 如何如何通过草料生成对应的模块化二维码

【草料】uni-app ts vue 小程序 如何如何通过草料生成对应的模块化二维码

一、查看uni-app项目 1、找到路径 可以看到项目从 src-race-pages-group 这个使我们目标的查询页面 下面我们将这个路径copy到草料内 2、找到进入页面入参 一般我们都会选择 onload() 函数下的入参 这里我们参数的是 id 二、草料 建议看完这里的教程文档 十分清晰&#xff01…
阅读更多...
详解自动化测试之 Selenium

详解自动化测试之 Selenium

目录 1. 什么是自动化 2.自动化测试的分类 3. selenium&#xff08;web 自动化测试工具&#xff09; 1&#xff09;选择 selenium 的原因 2&#xff09;环境部署 3&#xff09;什么是驱动&#xff1f; 4. 一个简单的自动化例子 5.selenium 常用方法 5.1 查找页面元素&…
阅读更多...
【STM32】RTC（实时时钟）

【STM32】RTC（实时时钟）

1.RTC简介 本质&#xff1a;计数器 RTC中断是外部中断&#xff08;EXTI&#xff09; 当VDD掉电的时候&#xff0c;Vbat可以通过电源--->实时计时 STM32的RTC外设&#xff08;Real Time Clock&#xff09;&#xff0c;实质是一个 掉电 后还继续运行的定时器。从定时器的角度…
阅读更多...
三十分钟学会zookeeper

三十分钟学会zookeeper

zookeeper 一、前提知识 集群与分布式 ​ 集群&#xff1a;将一个任务部署在多个服务器&#xff0c;每个服务器都能独立完成该任务。 ​ 分布式&#xff1a;将一个任务拆分成若干个子任务&#xff0c;由若干个服务器分别完成这些子任务&#xff0c;每个服务器只能完成某个特…
阅读更多...
Vite -静态资源处理 - SVG格式的图片

Vite -静态资源处理 - SVG格式的图片

特点 Vite 对静态资源是开箱即用的。 无需做特殊的配置。项目案例 项目结构 study-vite| -- src| -- assets| -- bbb.svg # 静态的svg图片资源| -- index.html # 主页面| -- main.js # 引入静态资源| -- package.json # 脚本配置| -- vite.co…
阅读更多...
探索Scrapy中间件：自定义Selenium中间件实例解析

探索Scrapy中间件：自定义Selenium中间件实例解析

简介 Scrapy是一个强大的Python爬虫框架&#xff0c;可用于从网站上抓取数据。本教程将指导你创建自己的Scrapy爬虫。其中&#xff0c;中间件是其重要特性之一&#xff0c;允许开发者在爬取过程中拦截和处理请求与响应&#xff0c;实现个性化的爬虫行为。 本篇博客将深入探讨…
阅读更多...
Pycharm之配置python虚拟环境

Pycharm之配置python虚拟环境

最近给身边的人写了脚本&#xff0c;在自己电脑可以正常运行。分享给我身边的人&#xff0c;却运行不起来&#xff0c;然后把报错的截图给我看了&#xff0c;所以难道不会利用pycharm搭建虚拟的环境&#xff1f;记录一下配置的过程。 第一步&#xff1a;右键要打开的python的代…
阅读更多...
什么是单域名SSL安全证书？

什么是单域名SSL安全证书？

单域名证书是什么&#xff1f; 单域名证书是指只包含一个具体域名的SSL/TLS证书&#xff0c;它可以用于保护单个主机名的HTTPS通信。例如&#xff0c;如果您有一个网站http://www.example.com&#xff0c;则单域名证书将仅为该域名颁发。 这种证书在保护单个域的安全方面很有…
阅读更多...
hash 哈希表

hash 哈希表

哈希表是一种期望算法。 一般情况下&#xff0c;哈希表的时间复杂度是 O(1)。 作用 将一个复杂数据结构映射到一个较小的空间 0~N&#xff08;10^5~10^6&#xff09;&#xff0c;最常用的情景&#xff1a;将 0~10^9 映射到 0~10^5。 离散化是一种及其特殊的哈希方式。离散化…
阅读更多...
【978.最长湍流子数组】

【978.最长湍流子数组】

目录 一、题目描述二、算法原理三、代码实现 一、题目描述 二、算法原理 三、代码实现 class Solution { public:int maxTurbulenceSize(vector<int>& arr) {int narr.size();vector<int> f(n),g(n);f[0]g[0]1;if(n1) return 1;int retmax(f[0],g[0]);for(int…
阅读更多...
鸿蒙4.0开发笔记之DevEco Studio启动时不直接打开原项目

鸿蒙4.0开发笔记之DevEco Studio启动时不直接打开原项目

1、想要在DevEco Studio启动时不直接打开关闭前的那个项目&#xff0c;可以在设置中进行。 有两个位置可以进入“设置”&#xff0c;一个是左上角的File>Settings&#xff0c;二是右上方的设置图标。 2、进入Settings界面以后&#xff0c;选择Appearance&Behavior下面…
阅读更多...
redis + celery

redis + celery

首先&#xff0c;部署Redis数据库&#xff1a; 先下载包&#xff1a; wget http://download.redis.io/releases/redis-5.0.7.tar.gz 解压redis包&#xff1a; tar -xvf redis-5.0.7.tar.gz 编译&#xff1a; make sudo make install &#xff08;这样没有指定安装目录&#…
阅读更多...
Linux入门（三）

Linux入门（三）

Linux grep 命令 1&#xff1a; 作用 ​ grep是一种文本搜索工具&#xff0c;它能使用特定的搜索模式&#xff0c;包括[正则表达式]搜索文本&#xff0c;并默认输出匹配行。 ​ windows类似的命令是findstr. 2&#xff1a;语法 grep -options&#xff08;参数&#xff09;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023