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

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

news 文章来源：https://blog.csdn.net/h960822/article/details/136233955 2024/11/16 1:21: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

外包干了3个月，技术倒退明显...

先说情况&#xff0c;大专毕业&#xff0c;18年通过校招进入湖南某软件公司&#xff0c;干了接近6年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…...

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

STM32控制数码管从0显示到99

首先 先画电路图吧&#xff01;打开proteus&#xff0c;导入相关器件&#xff0c;绘制电路图。如下&#xff1a;&#xff08;记得要保存啊&#xff01;发现模拟一遍程序就自动退出了&#xff0c;有bug&#xff0c;我是解决不了&#xff0c;所以就是要及时保存&#xff0c;自己重…...

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

【机器学习算法】KNN鸢尾花种类预测案例和特征预处理。全md文档笔记（已分享，附代码）

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论机器学习算法相关知识。机器学习算法文章笔记以算法、案例为驱动的学习&#xff0c;伴随浅显易懂的数学知识&#xff0c;让大家掌握机器学习常见算法原理&#xff0c;应用Scikit-learn实现机器学习算法的应用&#xff0…...

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

Windows 自带的 Linux 子系统(WSL)安装与使用

WSL官网安装教程&#xff1a; https://learn.microsoft.com/zh-cn/windows/wsl/install Windows 自带的Linux子系统&#xff0c;比用VM什么的香太多了。可以自己看官方教程&#xff0c;也可以以下步骤完成。 如果中间遇到我没遇到的问题百度&#xff0c;可以在评论区评论&#…...

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

C语言--贪吃蛇

目录 1. 实现目标2. 需掌握的技术3. Win32 API介绍控制台程序控制台屏幕上的坐标COORDGetStdHandleGetConsoleCursorinfoCONSOLE_CURSOR_INFOSetConsoleCursorInfoSetConsoleCursorPositionGetAsyncKeyState 4. 贪吃蛇游戏设计与分析地图<locale.h>本地化类项setlocale函…...

编程日记 2024/2/27 1:16:38

原型设计工具Axure RP

Axure RP是一款专业的快速原型设计工具。Axure&#xff08;发音&#xff1a;Ack-sure&#xff09;&#xff0c;代表美国Axure公司&#xff1b;RP则是Rapid Prototyping&#xff08;快速原型&#xff09;的缩写。 下载链接&#xff1a;https://www.axure.com/ 下载 可以免费试用…...

编程日记 2024/2/27 1:15:37

HeadFirst读书笔记

一、设计模式入门 1、使用模式最好的方式“把模式装进脑子里&#xff0c;然后在你的设计和已有的应用中&#xff0c;寻找何处可以使用它们”。以往是代码复用&#xff0c;现在是经验复用。 2、软件开发的一个不变的真理就是变化。 二、设计原则 1、找出应用中可能需要变化之…...

编程日记 2024/2/27 1:14:36

【C++】---内存管理new和delete详解

一、C/C内存分布 C/C内存被分为6个区域&#xff1a; &#xff08;1&#xff09; 内核空间&#xff1a;存放内核代码和环境变量。 &#xff08;2&#xff09;栈区&#xff1a;向下增长&#xff08;存放非静态局部变量&#xff0c;函数参数&#xff0c;返回值等等&#xff09; …...

编程日记 2024/2/27 1:12:33

go-zero微服务入门教程

go-zero微服务入门教程 本教程主要模拟实现用户注册和用户信息查询两个接口。 准备工作 安装基础环境 安装etcd&#xff0c; mysql&#xff0c;redis&#xff0c;建议采用docker安装。 MySQL安装好之后&#xff0c;新建数据库dsms_admin&#xff0c;并新建表sys_user&#…...

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

蓝桥杯刷题--python-12

3768. 字符串删减 - AcWing题库 nint(input()) sinput() res0 i0 while(i<n): if s[i]x: ji1 while(j<n and s[j]x): j1 resmax(j-i-2,0) ij else: i1 print(res) 3777. 砖块 - AcWing题库 # https://www.a…...

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

网站网址查询ip/广州搜索seo网站优化

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼程序清单#include&nbspint&nbspmain(void){&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspchar&nbsp&nbsp&nbsp&nbspa[2][3];&nbsp&nbsp&nbsp&nbsp&nbsp…...

编程日记 2024/11/15 23:53:44

做政府网站哪家公司好/seo优化网站的注意事项

Redis SET 命令手册1. 可选项2. 返回值3. 历史变化4. 案例5. 模式从Redis 1.0.0 起可用 时间复杂度&#xff1a;O(1) 设置 key 以保存字符串 value。如果 key 已经保存了一个 value&#xff0c;则无论其类型如何&#xff0c;都会覆盖该值。成功的 SET 操作将丢弃与该键任何以前…...

编程日记 2024/11/15 23:42:39

做学校的网站推广发展前景/搜索引擎公司排名

转载自&#xff1a;https://gist.github.com/andrewjong/6b02ff237533b3b2c554701fb53d5c4d&#xff0c;本文只做个人记录学习使用&#xff0c;版权归原作者所有。 import torch from torchvision import datasetsclass ImageFolderWithPaths(datasets.ImageFolder):"&qu…...

编程日记 2024/11/15 22:48:09

网站论坛制作/郑州网站建设七彩科技

DevOps是一种实践方法&#xff0c;旨在保证高质量的前提下实现研发运维一体化&#xff0c;从而大幅缩短系统变更从提交到部署生产环境的时间。其中&#xff0c;持续集成是DevOps中非常重要的一环&#xff0c;它涉及集成多个开发人员的代码&#xff0c;并不断编译和测试&#xf…...

编程日记 2024/11/15 19:48:14

收录软件最多的网站/深圳网络营销推广渠道

另一列中写入 IF(COUNTIF(C:C,C1)>1,"有重复","") 其余往下拖拉公式 我在想如果可以有不往下拖的呢? 不过好像筛选中也有类似的选项.转载于:https://www.cnblogs.com/vimmer/p/3445794.html...

编程日记 2024/11/15 12:34:33

wordpress配置cdn访问最快/企业策划书

Jmeter初了解-接口并发测试 介绍 我们在开发的时候&#xff0c;经常会需要进行接口压力测试&#xff0c;确定接口运行的稳定情况 这里我们就使用java开发的测试工具Jmeter来进行测试。 Jmeter 官网地址 Apache JMeter™应用程序是开源软件&#xff0c;是一个 100% 纯 Jav…...

编程日记 2024/11/15 12:02:11