React学习笔记

2024-10-15 09:57:31

介绍

开发环境搭建（脚手架）

CRA（create-react-app）构建

快速开始

Vite构建

JSX基本

查看脚手架代码

JSX的本质/解析

JS表达式

JSX中的列表渲染方式

简单条件渲染

复杂的条件渲染

事件系统

绑定点击事件示例：

获取事件参数对象

传递自定义参数

获取事件参数对象的同时接收自定义参数

React中的组件

useState（数据驱动视图）

状态变量的定义

点击计数器示例

修改对象状态

组件样式处理

classnames库

表单的双向绑定

获取DOM元素

组件间通信

父传子

props接收参数类型说明

子传父

useEffect

语法

依赖项参数说明

空依赖项代码示例：

空数组依赖项示例

特定依赖项示例

清除副作用函数

自定义Hook函数实现

自定义Hook使用注意点

Redux - 状态管理库

Redux原理简述

React整合Redux

安装依赖

创建目录结构

编写子模块代码

编写index.js（整合子模块）

store配置到React入口文件

组件中获取共享状态

获取更新状态的函数

调用更新函数时传参

Redux调试（浏览器插件）

ReactRouter（路由）

整合路由

安装依赖

配置路由映射

路由配置模块化

路由导航

声明式导航

编程式导航

路由跳转传参

searchParams传参

params传参

嵌套路由配置

实现二级路由配置

默认二级路由

404路由配置

路由模式

开发优化部分

别名路径配置

路径联想配置

打包优化-包体积查看

React.memo

props比较规则

解决引用类型比较机制问题：

useCallback

forwardRed

zustand（极简的状态管理库）

整合步骤

React组件库

AntDesignMobile（移动端组件库）

AntDesign（PC端-管理端组件库）

此文章内容主要与另一前端框架“Vue”框架作对比学习，介绍React的基本操作/使用。

介绍

React是一个JavaScript库，由Facebook团队开发和维护，是用来构建Web和原生交互界面的库。简单说就是用来简化前端页面搭建的工具。

开发环境搭建（脚手架）

脚手架：帮助我们快速搭建项目的基本结构，减少前期配置，加快项目开发。

CRA（create-react-app）构建

CRA是一个快速创建React开发环境的工具，底层由Webpack构建，封装了配置细节，开箱即用。

我们使用CRA构建工具，可以快速的构建React项目的基本结构，直接进行开发。

快速开始

1.使用命令"npx create-react-app 项目名"，快速创建项目基本结构代码。

2.进入项目目录，执行npm start

3.访问localhost:3000，查看脚手架创建并启动的项目。

Vite构建

Vite的构建速度相对CRA来说快很多，因为Vite在构建项目时不会把所有的项目依赖先下载，需要构建项目之后，我们使用"npm i"命令进行依赖的下载，然后使用"npm run dev"启动项目。

1. 使用命令"npm create vite@latest"，然后在命令窗口选择好react项目选项。

2.进入目录，执行"npm i"下载项目依赖

3.使用命令"npm run dev"启动项目，访问localhost:5173查看项目界面。

两种脚手架，使用哪一个都可以，目的都是为了帮助我们快速构建项目的基本代码和配置，让我们可以专注于开发更重要的界面和业务逻辑代码。

JSX基本

查看脚手架代码

在说明JSX之前，我们先看看使用脚手架构建的项目基本代码的模样（在此使用CRA脚手架构建的代码作展示说明）。

将非必要代码删除，留下App.js 和 index.js :

说明：

1.在React中，组件是一个.js后缀文件中的函数，此函数返回的是元素节点<div>。

2.<App>组件外包裹的React.StrictMode作用：用来帮助我们识别项目开发时存在的潜在问题（类似语法检查），渲染时不会影响。

JSX的本质/解析

概念：JSX是JavaScript和XML的缩写，代表我们可以在HTML模板中编写JS代码，这种编写方式是React编写页面模板的方式。

例如：

我们在<div>中使用{}来引用并显示我们JS变量内容，实际上这就是一种JSX语法。

实际上，JSX并不是标准的JS语法，浏览器本身并不能识别，需要通过解析工具解析成js代码之后，才能够让js解释器理解并在浏览器中运行。

JS表达式

在上面的演示中，我们通过{ }来引用并显示JS变量内容，实际上{}的引用方式就是JS的表示式。

JS表达式不仅能够引用变量，还可以引用字符串，方法和对象。

JSX中的列表渲染方式

渲染列表是一个常见的操作，例如我们向后端调用接口获取列表数据，然后渲染到页面上显示。

在Vue中我们使用v-for来遍历列表，实现列表渲染。

那么在React中我们该如何渲染列表呢？

示例：

在React中，没有像Vue的v-for指令，我们仅能通过遍历数组的方式，将数组中的元素遍历取出渲染，如上Map遍历。

简单条件渲染

描述元素的显示和控制，例如我们在Vue中使用指令v-if来控制元素标签的显示和控制。

示例：

如上，我们使用&& 和 三元运算符控制元素标签及组件的控制渲染。

复杂的条件渲染

在上面，我们使用了&& 和 三元运算符实现了简单的条件控制，但是在复杂的条件渲染场景，例如存在"else-if","else"的情况，仅仅通过简单的&& 和三元运算符就无能为例了。

示例：

通过声明一个函数，在函数中使用if条件语句，条件返回JSX内容，实现复杂的条件渲染控制。

事件系统

绑定事件：

语法：on + 事件名称 = { 事件的处理程序 }

绑定点击事件示例：

获取事件参数对象

获取事件触发时产生的一些参数，如事件触发时鼠标点击的位置参数。

传递自定义参数

在触发事件时，传递自定义参数到处理事件的函数中。

如果需要传递自定义参数，必须将函数的函数的声明改为箭头函数的写法。

获取事件参数对象的同时接收自定义参数

在箭头函数的参数中声明e参数，注意在处理函数中获取e的顺序。

React中的组件

React中的组件定义不像Vue以.vue文件后缀定义，在上面"脚手架的代码查看"中我们看到了React的组件定义形式，就是一个JS函数，函数中返回JSX结构。

我们一般将具有复用性的页面/功能代码进行封装成组件，然后在多个地方引用。降低代码冗余度，提高复用性。

同一文件声明多组件例如：

上方，我们直接在同一个组件文件（App.js）中定义多个组件，然后直接组合使用。

但是实际开发中，这样的方式并不推荐，会造成代码冗余。

一般是将一个组件的代码声明到同一个组件文件中，然后通过js引入的方式引用。

组件文件封装：

值得注意的是：我们在给组件命名的时候，需要给组件名称以大写字母开头。

useState（数据驱动视图）

useState在Vue中就类似：我们使用ref 或 reactive定义变量，当变量数据发生变化的时候，会自动驱动页面视图进行自定更新。

在React中我们使用useState定义的变量，称为状态变量。

当状态变量发生变化的时候，会自动驱动视图进行更新。

在实际开发中，例如我们可以在页面初次加载时异步获取数据展示，当获取到数据赋值给状态变量之后，会自动驱动视图进行更新，使得我们可以动态看到数据展示。

状态变量的定义

可以看到，useState函数返回一个数组，其中第一个是状态变量，而第二个是更新该状态的函数（函数名自定义）。

只有使用该函数对状态变量值进行修改，才会动态更新视图。

点击计数器示例

如下，我们会使用状态变量实现一个”点击计数器“案例。

主要是为了演示：当数据发生变化，页面数据也会动态发生变化（数据驱动视图）

当我们调用setCount函数更新count值时，页面会动态更新。

修改对象状态

组件样式处理

react一般的样式处理有两种：①行内式 ②className类名

值得注意的是：元素属性"className"属性名是固定不可自定义的。

classnames库

使用classnames库，可以非常方便的通过条件动态控制class类名的显示。

不使用classnames库的条件控制样式

如果元素存在多个样式，我们进行条件判断就需要使用字符串拼接的方式设置clss。

还是比较繁琐。

整合clssnames库

安装依赖：

npm i classnames

使用：

使用语法，官方描述：

classNames库更多信息：点击查看

表单的双向绑定

在React中并没有类似Vue中的"v-modle"指令来指定数据和视图的双向绑定。

我们仅有useState实现数据驱动视图，还差视图操作改变数据，实现双向绑定。

实际上在React中的双向绑定我们可以使用监听表单输入和useState配合使用实现表单和变量数据的双向绑定。

获取DOM元素

在React中想要获取/操作DOM元素，需要使用useRef函数。

组件间通信

React中的组件通信原理和Vue类似：

父传子：调用子组件时设置值属性，子组件props接收。

子传父：调用子组件时传递代参回调函数。

兄弟组件通信：状态提升，通过父组件作中间人传递。

以下通过“同一文件声明多个组件”的方式说明组件间数据传递。

父传子

传入多个参数，查看props:

props接收参数类型说明

----->

当我们在调用子组件时，在子组件标签内声明有其他的标签元素，那么这些标签元素在子组件中也会接收到：

子传父

关于兄弟间的通信不做演示，无非就是先子传父，在通过父传子。

父组件作为中间人为两个子组件传递数据。

useEffect

useEffect不仅可以充当类似Vue中的生命周期函数Mounted，还可以作到监听器的作用

使用场景：当我们想要页面初次加载完毕执行函数，或者想要监听某个状态变量的变化时可以使用。

语法

useEffect(() => {}, [])

参数1：一个函数，编写我们想要执行的操作。

参数2：依赖项，通过这个参数，我们可以控制Effect的功能（是Mounted还是监听器）。

依赖项参数说明

依赖项：可以看作就是"状态变量"

1.在没有声明依赖项（第二个参数为空）时，组件加载完毕会渲染页面，每一个状态变量发生变化时也会重新执行操作函数。

2.依赖项为空数组时：作用类似于Vue中的Mounted，仅在页面初次加载完毕后执行函数。

3.声明特定依赖项时：作用类似Vue中的监听器watch，每当监听的依赖项发生变化时会执行函数。

空依赖项代码示例：

期待的控制台输出：当页面加载完毕，执行一次getData()，而当任一状态变量，如count发生变化执行getData()。

页面加载完毕，查看控制台我们会发现一个问题：getData函数默认执行了两次。

原因：由于React的严格模式（Strict Mode）在开发环境下会强制执行一些额外的渲染步骤（例如模拟组件卸载和重新挂载步骤）

解决：我们可以将严格模式关闭，但是这样的方式并不推荐。

值得注意的是，虽然关闭严格模式可以解决问题，但是一般不推荐，因为上述问题仅存在于开发环境中，在生产环境中并不会出现。

空数组依赖项示例

期待的控制台输出：仅在页面初次加载完毕时调用函数getData()，点击按钮修改状态变量，或其他状态变量发生变化时不会重新调用getData()。

页面加载完毕，控制台默认打印两次（函数调用两次），依然是上方所说的严格模式的问题。，当点击按钮，控制台不再会有打印（无函数调用）。

特定依赖项示例

期待的控制台输出：当页面加载时调用getData()函数打印，当点击第一个按钮时，修改依赖项count值时调用函数打印，当点击第二个按钮时不会调用函数打印。

通过测试可以知道，我们在useEffect的依赖项声明了count之后，当count值发生变化，会重新调用执行函数，而其他状态变量发生变化不会调用useEffect中的执行函数，这实际上就是监听器的作用。

清除副作用函数

什么是"副作用"？

我们在useEffect中的执行函数程序就是副作用。

为什么要清除副作用？

实际上就类似于我们在Vue中的unMoutned（组件卸载）时做的收尾操作，例如我们在组件挂载时声明了一个定时器，那么我们在组件卸载时就可以将还在执行的定时器删除，以免浪费性能。

语法：

我们将清除副作用逻辑代码放到return的箭头函数中即可。

自定义Hook函数实现

当我们想要封装一些逻辑代码时，常见的作法就是声明一个普通函数进行逻辑封装，但是在React中，我们在普通函数中不能直接使用 useState 或其他 React 特定的 Hook，因此封装必然受到限制，因此有时候我们不得不将代码逻辑封装到Hook函数中。

自定义Hook示例：

定义细节：自定义Hook函数必须以use开头

ps: React 不会自动去检查函数是否符合 hook 的规范，而是通过检查名称是否以 use 开头，来决定是否要将该函数视为 hook。如果你没有遵循这个命名规则，React 就无法正确处理你的 hook，可能会导致状态管理错误或其他不可预期的问题。

自定义Hook使用注意点

1. 只能在组件或其他Hook函数中调用。

2. 只能在组件的顶层调用，不能嵌套在if，for或其他嵌套的函数中。

例如：错误例子

Redux - 状态管理库

类似于在Vue开发时所使用的状态管理库：Vuex 或 Pinia。

我们一般将需要共享的数据（状态）存放到Redux中，以便所有组件获取或修改，实现状态共享。

Redux原理简述

核心原理是通过单一数据源（称为 Store）来管理应用的全局状态，确保状态的可预测性和一致性。它遵循以下几个关键原则：

单一状态树（Single Source of Truth）：整个应用的状态以一个对象树的形式存储在唯一的 Store 中。所有组件都从这个 Store 读取状态，这样应用的状态可以集中管理和跟踪。
状态只读（State is Read-Only）：唯一能够改变状态的方法是通过触发（dispatch）一个 Action。Action 是一个描述事件的普通 JavaScript 对象，包含类型（type）和可能的负载（payload）。不能直接修改状态，必须通过 Action 来表达“想要做什么”。
使用纯函数来执行状态更新（State Changes are Made with Pure Functions）：更新状态的逻辑被封装在 Reducer 函数中。Reducer 是一个纯函数，它接收当前的状态和 Action，返回新的状态。Reducer 不允许有副作用，不能直接修改传入的状态，只能返回新的状态对象。

这些原则确保 Redux 的状态管理可预测，调试容易，特别是当应用变得复杂时，可以通过日志工具跟踪状态变化。同时，通过时间旅行（time-traveling debugging）功能，开发者可以轻松回溯应用的状态，确保每次状态变更都是透明和可追溯的。

React整合Redux

安装依赖

1. Redux Toolkit 2.react-redux

npm i @reduxjs/toolkit react-redux

创建目录结构

modules：Redux子模块，实现模块化。

index.js：Redux入口文件，整合子模块，暴露store。

编写子模块代码

// 计数器Store子模块 counterStore.js
import { createSlice } from "@reduxjs/toolkit";

const counterStore = createSlice({
    // 定义状态
    name: "count",
    // 初始化状态
    initialState:{
        count: 0
    },
    // 声明更新状态的函数
    reducers:{
        increment(state){
            state.count++;
        },
        decrement(state){
            state.count--;
        }
    }
})

// 解构出更新函数
const { increment, decrement } = counterStore.actions;
// 获取Reducer
const reducer = counterStore.reducer;

// 按需导出函数
export { increment, decrement }
// 默认导出Reducer
export default reducer;

编写index.js（整合子模块）

// 导入子模块reducer  - index.js
import { configureStore } from "@reduxjs/toolkit"
import counterReducer from "./modules/counterStore"

// 定义store导出
const store = configureStore({
    reducer: {
        counter: {
            counter: counterReducer // counter为自定义名称，在组件内使用时的名称
        }
    }
})

export default store;