当前位置： 首页 > news >正文

react项目中的redux以及react-router-dom

news 2025/9/14 14:18:40

扫盲知识点：

1 传递自定义事件：

        <button onClick={(e)=>{change(e)}}>获取事件对象e</button>

        将事件对象e传递到了change的这个方法中。

2 同时传递自定义事件和参数：

         <button onClick={(e)=>{change(‘我是参数’，e)}}>获取事件对象e</button>

        调用参数和事件对象e； change(str，e)

3 useState遵循状态不可变的原则，不能修改useState的原始值，只能老值对新值进行替换，也就

         是任何对修改源数据的方法都是不可取的，比如数组的增删截取等，都会修改原数组。

         遇到对象和数组的情况下，就可以使用ES6的展开运算符等进行替换。

4  关于className以及classnames插件的用法 ：

        <div className={`active  ${isShow? ' active1' :' '}` }><div> 动态添加类名

        <div className={classNames ( 'active' , { 'active1':true } ) } />

5  夸层级组件之间的通信方式: Context;

        执行步骤： 第一步创建实例createContext； 第二步实例的provide提供数据，第三步

        useContext消费数据：

        在父组件： import {createContext} from 'react' ;  const ctx = createContext（）；

        function App（）{return （ <ctx.Provider value={count}> <div>app组件</div>

        </ctx.Provider>）}

        子组件 import {useContext} from  ' react ' ; import ctx from ‘./app.js’; 

        const a = useContext(ctx);

6 useEffect的理解：由渲染本身引起的操作，可以发送axios请求，更改DOM等。
        
    useEffect（（）=>{}） // 组件渲染完毕会执行一次，组件每次有数据发生改变的时候也会更新

     useEffect（（）=>{},[]） // 该函数只会在渲染完毕之后执行一次，以后将不会再执行；

     useEffect（（）=>{},[count]） / 组件渲染完毕触发一次，依赖状态值发生改变触发

7 redux状态管理工具：

        使用步骤： 1 定义一个reducer的函数（根据当前想要做的修改返回一个新的状态）
                           2 使用createStore方法传入reducer函数，生成一个store的实例。
                           3 使用store实例的subscribe方法订阅数据的变化(数据发生变化得到通知）；
                           4 使用store实例的dispatch方法提交action对象触发数据变化
                           5 使用store的getState的方法获取最新的数据

        <html>
                <button id="increment">+</button>
                <script href="加载redux的cdn"></script>

                1 const reducer = （state={count:0}, action）{
                        if(action.type==='add'){
                                return {count: state.count++}
                        }else if(action.type==='dee'){
                                return {count:state.count--}
                        }else{ return state}
                }

                2 const store = Redux.createStore(reducer)

                3 store.subscrbe(()=>{console.log('发生变化了')})

                4 document.queryselector('button').addEventlister('click',function()
                {store.dispatch(reducer({type:'add'}))})

                5 store.subscrbe(()=>{console.log(store.getState().count)})
        </html>

8 reduxjs/toolkit（切片）的使用：

        第一步安装： npm i react-redux @reduxjs/tookit

        第二步 src创建store文件夹，store文件夹下创建index.js文件与module的文件夹，

        第三步 创建count切片：

        1 引入切片 const {createSlice} from '@reduxjs/toolkit'

        2 创建reducer的函数并把相关同步异步方法以及reducer导出

        const countSlice = createSlice({

                name:'countSlice',
                
                initialState:{ countLIst:[] };

                reducers:{
                        addCountList(state,action){
                                return state.countList.push(action.paylot)
                         }
                }
        })
        export  function setCountListAsync(){
        
                return async (dispatch)=>{
                        const res = await axios.get('xxxxx')
                        
                        dispatch(addCountList(res.data))
                }
        }
        const {addCountList } = countSlice.actions
        export {addCountList} 
        const countStore = countSlice.reducer
        export default countStore

        3 index.js文件中导入；
        
        import {configureStore} from '@reduxjs/toolkit'

        import countStore from './module/count.js'

        const store = configureStore({
                reducer:{
                        count:countStore,
                }
        })

        export default store

        4 index.js入口文件中全局注册:

        import {Provider} from 'react-redux';

        import store from './store/index.js'

        <Provider store={store}><App></App></Provider>

        5 组件中使用：import {useSelector,useDispatch} from 'react-redux'
                
                const  dispatch = useDIspatch()                

               获取数据 useSelector（state=>state.count.countList）

               调用异步的方法 dispathch（setCountListAsync）

9 react-router-dom的使用：
        
        1 进行依赖的安装： npm install react-router-dom

        2 创建router文件夹，router文件下创建index.js文件配置路由：

        import {createBrowseRouter} from 'react-router-dom'

        const routes = createBrowserRouter([
                {
                        path:'/home',

                        element:<home></home>,

                        children:[
                                {
                                   index:true, // 进入home路由 默认展示 下面这个路由组件

                                    element：<Children><Children>
                                },

                                {
                                        path:'son',

                                        ellement:<Son></Son>

                                }
                        ]
                }
        ])

        3 项目的index.js文件中，用来包裹APP组件：

        import {RouterProvider} from 'react-router-dom'

        import {routes} from './router/index.js'

        <RouterProvider router={routes}></ RouterProvider>

        4 如果是在二级出口的话  需要使用<Outlet></Outlet>   <Link to="/son"></Link>  这里不需要
        加父组件的路径了。

        5 searchParams 传参 与 params传参。

           <Link to="/home?id=10&name='zs' "></Link>  传递参数

           const [params] = useSearchParams()  console.log(params.get('id')) // 10 

            <Link to='./home/12'>params传参</Link>  

             const params =  useParams()  let id = params.id // 12

        

         

相关文章：

react项目中的redux以及react-router-dom

扫盲知识点&#xff1a; 1 传递自定义事件&#xff1a; <button onClick{(e)>{change(e)}}>获取事件对象e</button> 将事件对象e传递到了change的这个方法中。 2 同时传递自定义事件和参数&#xff1a; <button onClick{(e)>{change(‘我…...

编程日记 2024/2/27 2:09:34

django学习网址

https://www.django.cn/ Django中文网 https://docs.djangoproject.com/zh-hans/5.0/ Django 教程 | 菜鸟教程 (runoob.com) https://gitee.com/djangoadmin/DjangoAdmin_Django_Layui DjangoStarter: 基于Django定制的快速Web开发模板&#xff0c;功能包括&#xff1a;Do…...

编程日记 2024/2/27 2:08:33

@ 代码随想录算法训练营第4周（C语言）|Day21（二叉树）

代码随想录算法训练营第4周&#xff08;C语言&#xff09;|Day21&#xff08;二叉树&#xff09; Day21、二叉树&#xff08;包含题目 ● 530.二叉搜索树的最小绝对差 ● 501.二叉搜索树中的众数 ● 236. 二叉树的最近公共祖先 &#xff09; 530.二叉搜索树的最小绝对差 题目…...

编程日记 2024/2/27 2:06:31

Android的消息机制--Handler

一、四大组件概述 Android的消息机制是由Handler、Message、MessageQueue&#xff0c;Looper四个类支撑&#xff0c;撑起了Android的消息通讯机制&#xff0c;Android是一个消息驱动系统&#xff0c;由这几个类来驱动消息与事件的执行 Handler&#xff1a; 用来发送消息和处…...

编程日记 2024/2/27 2:05:29

获取用户信息与token理解

获取用户信息和token是在开发Web应用程序时常见的需求&#xff0c;可以通过以下步骤来实现&#xff1a; 用户登录&#xff1a;用户在应用程序中输入用户名和密码进行登录验证。一旦验证成功&#xff0c;应用程序会生成一个唯一的token&#xff0c;并将其返回给客户端。存储tok…...

编程日记 2024/2/27 2:03:28

网络设备和网络软件

文章目录 网络设备和网络软件网卡交换机交换机的三个主要功能交换机的工作原理第二层交换和第三层交换交换机的堆叠和级联 路由器路由器工作原理 网关网关的分类 无线接入点(AP)调制解调器网络软件 网络设备和网络软件 网卡 网络接口卡又称网络适配器&#xff0c;简称网卡。网…...

编程日记 2024/2/27 1:58:23

全连接层是什么

个人浅显的看法: 当前层的每一个神经元&#xff0c;都和下一层的每一个神经元有连接&#xff0c;叫全连接层。 当前层有n个神经元&#xff0c;下一层有m个神经元&#xff0c;则全连接层&#xff0c;当前层的n个神经元和下一层m个神经元都有连接...

编程日记 2024/2/27 1:57:21

JAVA工程师面试专题-《Redis》篇

目录 一、基础 1、Redis 是什么 2、说一下你对redis的理解 3、Redis 为什么这么快&#xff1f; 4、项目中如何使用缓存&#xff1f; 5、为什么使用缓存&#xff1f; 6、Redis key 和value 可以存储最大值分别多是多少&#xff1f; 7、Redis和memcache有什么区别&#xf…...

编程日记 2024/2/27 1:56:20

JavaScript BOM

BOM&#xff1a;浏览器对象模型&#xff0c;可以让我们通过js来操作浏览器 window 代表整个浏览器窗口 同时也是页面中的全局对象 Location 代表浏览器地址栏信息 Navigator 代表浏览器信息 可以获取不同的浏览器信息 History 代表浏览器的历史记录 Screen 代表用户的屏幕信…...

编程日记 2024/2/27 1:55:19

uniapp微信小程序-项目实战修改密码

图标是使用uview里面的图标&#xff0c;icfont也可以 以下是所有代码 <template><view><!-- 密码三个 --><view class"password" v-for"(item,index) in userList"><view class"contentuser"><view class&qu…...

编程日记 2024/2/27 1:53:17

linux系统---防火墙拓展

目录 一、iptables 1.基本语法 2.四表五链——重点记忆 2.1四表 2.2五链 2.3总结 3.iptables选项示例 3.1 -Z 清空流量计数 3.2 -P 修改默认规则 3.3 -D 删除规则 3.4 -R 指定编号替换规则 4.白名单 5.通用匹配 6.示例 6.1添加回环网卡 6.2可以访问端口 6.3 主…...

编程日记 2024/2/27 1:50:11

就业的二三事

先说一下当前本人的情况&#xff1a;双非本一&#xff0c;研二在读&#xff0c;一篇图像处理方面的sci一区&#xff08;二作&#xff09;&#xff0c;日常工作语言为python&#xff0c;有过一段开源实习。要开始准备实习了&#xff0c;发个帖子记录一下自己所收集的信息。 前几…...

编程日记 2024/2/27 1:48:10

Go语言必知必会100问题-05 接口污染

接口污染 在Go语言中&#xff0c;接口是我们设计和编写代码的基石。然而&#xff0c;像很多概念一样&#xff0c;滥用它是不好的。接口污染是指用不必要的抽象来编写代码&#xff08;刻意使用接口&#xff09;&#xff0c;使得代码更难以理解。这是具有不同习惯&#xff0c;特…...

编程日记 2024/2/27 1:44:06

FastBee商业版本源码获取下载

一、系统功能 系统功能功能说明开源版本商业版本产品管理产品详情、产品物模型、产品分类、设备授权、产品固件支持支持设备管理设备详情、设备分组、设备日志、设备分享、设备实时控制、实时状态、数据监测支持支持物模型管理属性&#xff08;设备状态和监测数据&#xff09;…...

编程日记 2024/2/27 1:43:05

Java实战：Spring Boot集成Elasticsearch全文搜索引擎

本文将详细介绍如何在Spring Boot应用程序中集成Elasticsearch全文搜索引擎。我们将探讨Elasticsearch的基本概念&#xff0c;以及如何使用Spring Boot和Spring Data Elasticsearch模块来实现全文搜索功能。此外&#xff0c;我们将通过具体的示例来展示如何在Spring Boot应用程…...

编程日记 2024/2/27 1:31:55

python 进程笔记二（通讯） （概念+示例代码）

1、为什么要掌握进程间通信 Python代码效率由于受制于GIL全局锁限制&#xff0c;多线程不能利用多核CPU来加速&#xff0c;而多进程方式却可以绕过GIL限制, 发挥多CPU加速的优势&#xff0c;达到提高程序的性能的目的。 然而进程间通信却是不得不考虑的问题。 进程不同于线程&a…...

编程日记 2024/2/27 1:29:53

电机控制-----电机极对数，相电感，相电阻以及磁链常数的测量

电机控制-----电机极对数&#xff0c;相电感&#xff0c;相电阻以及磁链常数的测量 我们在做电机控制的时候&#xff0c;拿到一个电机首先要知道它的参数&#xff0c;然后才能进行相应的开发&#xff0c;我这里介绍的是通过平常常用的手段去获得电机的参数&#xff1a;极对数&…...

编程日记 2024/2/27 1:28:51

SQL注入之oracle注入+SQLbypass+sqlmap实战

学习路还很长&#xff0c;切莫轻言放弃&#xff01; 目录 Oracle数据库介绍 Oracle数据库和MySQL数据库的差别 Oracle数据库注入 SQLbypass姿势 sqlmap工具实战(kali自带) Oracle数据库介绍 Oracle数据库是全球最知名的关系型数据库管理系统&#xff08;RDBMS&#xff09…...

编程日记 2024/2/27 1:27:50

【GPTs分享】GPTs分享之Write For Me

Write For Me 是一个专门定制的GPT版本&#xff0c;旨在为用户提供高质量的文本内容创作服务。它适用于各种写作需求&#xff0c;从商业计划、学术文章到创意故事等。下面是从简介、主要功能、使用案例、优点和局限性几个方面对Write For Me 的详细介绍。 简介 Write For Me …...

编程日记 2024/2/27 1:26:48

css4浮动+清除浮动

浮动 一.常见网页布局1.三种布局方式2.布局准则 二.浮动&#xff08;float&#xff09;1.好处2.概念3.三大特性4.使用5.常见网页布局模板6.注意点 三.清除浮动1.why2.本质3.语法4.四种way&#xff08;后三个都是给父级添加&#xff09;清除浮动总结 一.常见网页布局 1.三种布局…...

编程日记 2024/2/27 1:25:48

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2025/9/14 10:15:03

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/9/13 21:37:58

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/9/7 3:46:41

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/9/6 15:50:17

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/9/13 15:19:41

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2025/9/1 22:19:02

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/7/8 0:38:36

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2025/7/18 1:59:18

6️⃣Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化：通往区块链世界的钥匙 一、前言：离区块链还有多远？ 区块链听起来可能遥不可及，似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上，构建一个区块链的核心并不复杂，尤其当你已经掌握了一门系统编程语言，比如 Go。 要真正理解区…...

编程新知 2025/7/16 1:52:34