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

目录

[1. React 介绍](#1. React 介绍)

[1.1 React是什么](#1.1 React是什么)

[1.2 React的优势](#1.2 React的优势)

[1.3 React的市场情况](#1.3 React的市场情况)

[2. 开发环境搭建](#2. 开发环境搭建)

[2.1 使用create-react-app快速搭建开发环境](#2.1 使用create-react-app快速搭建开发环境)

[2.2 react 项目文件说明](#2.2 react 项目文件说明)

[2.3 index.js项目入口文件](#2.3 index.js项目入口文件)

[2.4 App.js 项目根组件](#2.4 App.js 项目根组件)

[2.5 react 调试工具安装](#2.5 react 调试工具安装)

[3. JSX基础-概念和本质](#3. JSX基础-概念和本质)

[3.1 什么是JSX](#3.1 什么是JSX)

[3.2 JSX的本质](#3.2 JSX的本质)

[3.3 JSX高频场景-JSX中使用JS表达式](#3.3 JSX高频场景-JSX中使用JS表达式)

[3.4 JSX高频场景-JSX中实现列表渲染](#3.4 JSX高频场景-JSX中实现列表渲染)

[3.5 JSX高频场景-JSX中实现条件渲染](#3.5 JSX高频场景-JSX中实现条件渲染)

[3.6 JSX高频场景-JSX中实现复杂条件渲染](#3.6 JSX高频场景-JSX中实现复杂条件渲染)

[4. React中的事件绑定](#4. React中的事件绑定)

[4.1 React 基础事件绑定](#4.1 React 基础事件绑定)

[4.2 使用事件对象参数](#4.2 使用事件对象参数)

[4.3 传递自定义参数](#4.3 传递自定义参数)

[4.4 同时传递事件对象和自定义参数](#4.4 同时传递事件对象和自定义参数)

[5. React中的组件](#5. React中的组件)

[5.1 组件是什么](#5.1 组件是什么)

[5.2 React组件](#5.2 React组件)

[6. useState](#6. useState)

[6.1 useState基础使用](#6.1 useState基础使用)

[6.2 修改状态的规则---状态不可变](#6.2 修改状态的规则—状态不可变)

[6.3 修改对象状态](#6.3 修改对象状态)

[7. 组件的样式处理](#7. 组件的样式处理)

[7.1 组件基础样式方案](#7.1 组件基础样式方案)

[8. 案例：B站评论](#8. 案例：B站评论)

[8.1 B站评论案例](#8.1 B站评论案例)

[8.2 渲染评论列表](#8.2 渲染评论列表)

[8.3 实现评论删除](#8.3 实现评论删除)

[8.4 渲染Tab+点击高亮实现](#8.4 渲染Tab+点击高亮实现)

[8.5 classnames优化类名控制](#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的时候类名显示