React18学习笔记（一）——react基础

已于 2024-09-13 15:13:05 修改
阅读量828 收藏 14
点赞数 18
分类专栏： React18快速入门学习笔记 文章标签： react.js 学习 笔记
于 2024-08-20 22:52:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56370772/article/details/141368997
版权

目录

1. React 介绍

1.1 React是什么

1.2 React的优势

1.3 React的市场情况

2. 开发环境搭建

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

2.2 react 项目文件说明

2.3 index.js项目入口文件

2.4 App.js 项目根组件

2.5 react 调试工具安装

3. JSX基础-概念和本质

3.1 什么是JSX

3.2 JSX的本质

3.3 JSX高频场景-JSX中使用JS表达式

3.4 JSX高频场景-JSX中实现列表渲染

3.5 JSX高频场景-JSX中实现条件渲染

3.6 JSX高频场景-JSX中实现复杂条件渲染

4. React中的事件绑定

4.1 React 基础事件绑定

4.2 使用事件对象参数

4.3 传递自定义参数

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

5. React中的组件

5.1 组件是什么

5.2 React组件

6. useState

6.1 useState基础使用

6.2 修改状态的规则—状态不可变

6.3 修改对象状态

7. 组件的样式处理

7.1 组件基础样式方案

8. 案例：B站评论

8.1 B站评论案例

8.2 渲染评论列表

8.3 实现评论删除

8.4 渲染Tab+点击高亮实现

8.5 classnames优化类名控制

1. React 介绍

1.1 React是什么

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

1.2 React的优势

相较于传统基于DOM开发的优势：
  • 组件化的开发方式
  • 不错的性能

相较于其它前端框架的优势：

  • 丰富的生态
  • 跨平台支持

1.3 React的市场情况

全球最流行，大厂必备

2. 开发环境搭建

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

create-react-app是一个快速 创建React开发环境的工具， 底层由Webpack构建， 封装了配置细节 ，开箱即用
执行命令：
  • npx create-react-app react-basic
    • npx Node.js工具命令，查找并执行后续的包命令
    • create-react-app 核心包（固定写法），用于创建React项目
    • react-basic React项目的名称（可以自定义）
创建React项目的更多方式：
  • https://zh-hans.react.dev/learn/start-a-new-react-project

2.2 react 项目文件说明

  • 项目的根组件 App.js

  • 项目的入口，项目从这里开始运行 index.js

2.3 index.js项目入口文件

  • App.js -> index.js -> public/index.html(root)

2.4 App.js 项目根组件

2.5 react 调试工具安装

老方法——极简插件安装

参考：vue3.0学习笔记（一）——vue3简介与vite脚手架的使用——4.2 Vue.js Devtools 版本问题

3. JSX基础-概念和本质

3.1 什么是JSX

概念：
  • JSX 是 JavaScript 和 XML（HTML）的缩写，表示在 JS 代码中编写 HTML 模版结构,它是React 中编写 UI 模版的方式
 
优势：
  • HTML的声明式模版写法
  • JS的可编程能力

3.2 JSX的本质

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

3.3 JSX高频场景-JSX中使用JS表达式

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

  • 使用引号传递字符串
  • 使用JS变量
  • 函数调用和方法调用
  • 使用JavaScript对象

​​​注意：

  • if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中

3.4 JSX高频场景-JSX中实现列表渲染

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

  • map方法会返回一个新的数组，该数组包含通过对原始数组中的每个元素应用一个函数处理后得到的结果。

  • map 循环那个结构 return那个结构

  • key 的作用： React框架内部使用，提升更新性能

3.5 JSX高频场景-JSX中实现条件渲染

语法：
  • 在React中，可以通过逻辑与运算符&&、三元表达式（?:）实现基础的条件渲染

3.6 JSX高频场景-JSX中实现复杂条件渲染

需求：
  • 列表中需要根据文章状态适配三种情况，单图，三图，和无图三种模式
解决方案：
  • 自定义函数 + if判断语句

4. React中的事件绑定

4.1 React 基础事件绑定

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

4.2 使用事件对象参数

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

4.3 传递自定义参数

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

注意：

  • 不能直接写函数调用，这里事件绑定需要一个函数引用

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

5. React中的组件

5.1 组件是什么

概念：
  • 一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次
  • 组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用

5.2 React组件

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

6. useState

6.1 useState基础使用

useState 是一个 React Hook（函数），它允许我们向组件添加一个 状态变量 , 从而控制影响组件的渲染结果
5 本质：
  • 和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）

说明：

  • useState是一个函数，返回值是一个数组
  • 数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
  • useState的参数将作为count的初始值
  • 需要先从 react 中导入 useState 函数

6.2 修改状态的规则—状态不可变

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

6.3 修改对象状态

规则：
  • 对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改
直接修改原对象，不引发视图变化
调用set传入新对象用于修改

7. 组件的样式处理

7.1 组件基础样式方案

React组件基础的样式控制有俩种方式：
  • 行内样式（不推荐）
  • class类名控制

① 行内样式

  • 第一个 {} 是一个语法， 第二个{} 是一个对象

② class类名控制

  • index.css

  • App.js

8. 案例：B站评论

8.1 B站评论案例

业务需求：
  • 渲染评论列表
  • 删除评论实现
  • 渲染导航Tab和高亮实现
  • 评论列表排序功能实现

8.2 渲染评论列表

核心思路：
  • 使用useState维护评论列表
  • 使用map方法对列表数据进行遍历渲染（别忘了加key）

评论列表数据：

① 使用useState维护评论列表

② 使用map方法对列表数据进行遍历渲染（别忘了加key）

8.3 实现评论删除

需求：
  • 只有自己的评论才显示删除按钮
  • 点击删除按钮，删除当前评论，列表中不再显示
核心思路
  • 删除显示 - 条件渲染
  • 删除功能 - 拿到当前项id以id为条件对评论列表做filter过滤

① 删除显示 - 条件渲染

  • 当前用户的 uid 与 list 列表中的列表项的 uid 相同，则显示删除按钮

② 删除功能 - 拿到当前项id以id为条件对评论列表做filter过滤

8.4 渲染Tab+点击高亮实现

需求：
  • 点击哪个tab项，哪个做高亮处理
核心思路：
  • 点击谁就把谁的type（独一无二的标识）记录下来，然后和遍历时的每一项的type做匹配，谁匹配到就设置负责高亮的类名

导航 Tab 数据：

① 点击谁就把谁的 type 记录下来

② 通过记录的 type 和每一项遍历时的 type 做匹配，控制激活类名 active 的显示

③ 根据 type 类型进行排序列表

  • hot ——根据点赞数排序

  • time——根据创建时间排序

④ 使用 lodash 库实现排序功能

lodash 库官网：Lodash

  • 下载
    • npm install lodash 或者 npm i lodash（不支持 yarn 安装）
  • 引入：

    • import _ from 'lodash'

  • _.orderBy(排序的对象或数组, 排序的条件, 升序排序/降序排序)方法，返回一个排序后的新数组

    • 升序排序/降序排序: asc/desc

8.5 classnames优化类名控制

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

现在的问题：字符串的拼接方式不够直观，也容易出错
  • 下载：
    • npm install classnames
  • 引入：
    • import classNames from 'classnames'

  • className(静态的类名, {动态类名: 条件})
    • 动态类名 key 表示要控制的类名，value表示条件，true的时候类名显示
因为奋斗超太帅啦
关注
专栏目录
React18学习笔记（二）——react基础
weixin_56370772的博客
08-22 1195
1. 受控表单绑定1. 受控表单绑定① 准备一个React状态值② 通过value属性绑定状态，通过onChange属性绑定状态同步的函数。
React学习笔记（一）——React 入门
weixin_56370772的博客
09-13 1554
了解 react 的历史背景和基本概念React起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。React 是最流行的前端框架之一。对比近两年Vue 和 Angular的下载量，还有 2021 年开发者使用的 web 框架的比例，可以看到 React 是前端工程师应该必备技能之一，现在很多大厂也在使用它。
React学习笔记九——React-redux的使用详解
2401_84411557的博客
04-29 858
const {value} = this.selectNumberconst {count} = this.propsif(count % 2 !== 0){this.props.increment(value*1)}}incrementAscyn= () => {const {value} = this.selectNumberthis.props.incrementAsync(value*1,500)}render(){return( this.selectNumber
React学习笔记（二）——React 组件
weixin_56370772的博客
09-15 1080
了解 React 组件作用，和创建组件的方式组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。将页面按照界面功能进行拆分，每一块界面都拥有自己的独立逻辑，这样可以提高项目代码的可维护性。使用函数function使用类class掌握类组件中状态的定义与使用定义state属性定义组件状态，属于组件自己的数据，它的值是个对象。使用state的时候通过this。数据发生变化，驱动视图更新。super()// 给 this 增加一个属性 state。
React18学习笔记（三）——redux状态管理工具
weixin_56370772的博客
08-24 1257
组件中使用哪个hook函数获取store中的数据？组件中使用哪个hook函数获取dispatch方法？如何得到要提交action对象？执行store模块中导出的actionCreater方法4. Redux与React - 提交action传参4.1 需求说明组件中有俩个按钮 `add to 10` 和 `add to 20` 可以直接把 count 值修改到对应的数字，目标count值是在组件中传递过去的，需要在提交action的时候传递参数4.2 提交action传参实现需求。
React学习笔记十二——组件之间的通信方式
2401_84411557的博客
04-29 838
data: ‘子组件默认数据’,render(){return(state = {data: ‘我是父组件的数据’render() {return (子组件 => 父组件。
React学习笔记八——Redux的使用详解
2401_85158399的博客
07-12 477
中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
React学习笔记五——组件的生命周期
2401_85122951的博客
06-19 522
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。
React学习笔记一——JSX语法规则，最全指南
03-21 416
引入一些react核心库和babel。
React基础学习笔记（一）——简介及windows10下环境搭建和项目起步
weixin_36466834的博客
05-29 586
React学习笔记（一）—— 简介及windows10下环境搭建和项目起步一、前言二、开始安装（一）安装node.js1、下载node.js2、安装node.js（含npm）（二）基本操作1、查看版本号2、升级更新3、全局安装 create-react-app三、创建项目 一、前言 首先，什么是React？ 1）React是JavaScript最受欢迎的的库之一； 2）它不算是一个框架（这点和Angular不一样了）； 3）React是Facebook创建的一个开源项目； 4）React用于在前端构建用户界
React学习笔记七——React-router-web的使用详解
m0_70273331的博客
04-28 165
] } ]; //对路由组件容器的二次封装 const RouteWithSubRoutes = route => ( <Route path={route.path} render={props => ( <route.component {…props} routes={route.routes} /> )} /> ); const RouteConfigExample = () => ( Tacos Sandwiches {routes.map
React基础学习笔记（二）—— 项目目录学习
weixin_36466834的博客
06-27 400
React基础学习笔记（二）—— 简项目目录学习一、目录结构 一、目录结构 前面一篇React基础学习已经创建了一个空的项目，我们可以先看一下目录结构： react-app/ node_modules/ public/ favicon.ico index.html logo192.png logo512.png manifest.json robots.txt src/ App.css App.js App.test.js
React 学习笔记 —— mounted 回调不只执行一次
叹之
06-29 1300
前言 在开发的时候往往 mounted 回调都只执行一次，因此下意识的觉得这是常识了 但其实 mounted 执行次数可以不是一次，取决于 React 在做 Diff 的时候是否卸载原结点 代码 该代码对 Inner 组件的相关生命周期进行研究 通过 toggle 按钮触发App重绘 import { useEffect, useState } from "react"; const Inner = () => { useEffect(() => { console.log
React 学习笔记 —— Portal
叹之
06-29 529
作用 portal 即传送门，他可以将组件渲染到指定元素下，而不限于当前书写的 JSX 层级结构 用途：当需要将某个元素始终保持在顶层时，可以使用 protal 将其传入到 body 下 代码 // App.jsx import { createPortal } from "react-dom"; const Inner = () => { // 此处返回的 JSX 是经过 createPortal 包装处理过的 return createPortal(<div id="Inner
react通过下拉框选择多个，并展示在下方的方式
qq18346342939的博客
09-26 294
二、form及选择展示。
Reactor 反应堆模式
Xpccccc的博客
09-27 928
Reactor 反应堆模式
现代前端框架实战指南：React、Vue.js、Angular核心概念与应用
m0_67484548的博客
09-23 1474
现代前端框架实战指南：React、Vue.js、Angular核心概念与应用
react-问卷星项目（2）
最新发布
BHDDGT的博客
09-29 655
一个git hook 工具，即在git commit之前执行自定义的命令，将规范流程化，如执行代码风格的检查，避免提交非规范的代码，在github搜索即可。这两条是接着执行的，表示创建husky，在文档说明里也有，我按照视频里的指令执行会显示初始化失败，这两条我自己用的没问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值