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

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

news 2025/7/7 6:04:02

扫盲知识点：

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

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/7/6 6:27:41

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/7/7 5:39:43

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/6/16 12:40:21

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2025/7/4 11:10:06

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/7/7 3:01:07

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2025/7/6 12:08:18

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2025/7/5 3:27:00

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2025/7/6 19:16:38

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2025/7/6 12:28:30

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2025/7/4 7:42:03