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

扫盲知识点:

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({
                reducers:{
                        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

        

         

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/697069.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于微信小程序失物招领系统设计与实现(PHP后台+Mysql)可行性分析

博主介绍&#xff1a;黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者&#xff0c;CSDN博客专家&#xff0c;在线教育专家&#xff0c;CSDN钻石讲师&#xff1b;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…

CleanMyMac2024苹果电脑清理工具最新使用全面评价

作为软件评价专家&#xff0c;我对CleanMyMac X进行了全面的评估&#xff0c;以下是我的详细评价&#xff1a; CleanMyMac X4.14.6全新版下载如下: https://wm.makeding.com/iclk/?zoneid49983 一、功能 CleanMyMac X的功能相当全面&#xff0c;几乎涵盖了Mac电脑清理所需的…

nginx 具体介绍

一&#xff0c;nginx 介绍 &#xff08;一&#xff09;nginx 与apache 1&#xff0c; Apache event 模型 相对于 prefork 模式 可以同时处理更多的请求 相对于 worker 模式 解决了keepalive场景下&#xff0c;长期被占用的线程的资源浪费问题 因为有监听线程&#…

【数据结构】链式队列

链式队列实现&#xff1a; 1.创建一个空队列 2.尾插法入队 3.头删法出队 4.遍历队列 一、main函数 #include <stdio.h> #include "./3.linkqueue.h" int main(int…

文档控件DevExpress Office File API v23.2新版亮点 - 支持SVG

DevExpress Office File API是一个专为C#, VB.NET 和 ASP.NET等开发人员提供的非可视化.NET库。有了这个库&#xff0c;不用安装Microsoft Office&#xff0c;就可以完全自动处理Excel、Word等文档。开发人员使用一个非常易于操作的API就可以生成XLS, XLSx, DOC, DOCx, RTF, CS…

数据结构之单链表的操作

main函数 #include <stdio.h> #include "./03_linkList.h" int main(int argc, const char *argv[]) { linkList* head creatr_linkList(); insertHead_linkL…

运维SRE-19 网站Web中间件服务-http-nginx

Ans自动化流程 1.网站集群核心协议&#xff1a;HTTP 1.1概述 web服务&#xff1a;网站服务&#xff0c;网站协议即可. 协议&#xff1a;http协议,https协议 服务&#xff1a;Nginx服务&#xff0c;Tengine服务....1.2 HTTP协议 http超文本传输协议&#xff0c;负责数据在网站…

更高效的构建工具-vite

更高效的构建工具-vite 前言Vite是什么Vite和webpack的比较1. 运行原理2. 使用成本 Vite的初体验 前言 首先我们要认识什么时构建工具&#xff1f; 企业级项目都具备什么功能呢&#xff1f; Typescript&#xff1a;如果遇到ts文件&#xff0c;我们需要使用tsc将typescript代码…

Android约束布局中用ConstraintHelper实现过渡动画效果

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂&#xff0c;风趣幽默"&#xff0c;感觉非常有意思,忍不住分享一下给大家。 &#x1f449;点击跳转到教程 一.创建一个类CircularRevealHelper继承ConstraintHelper代码如下 /*** Author: ly* Da…

【Linux从青铜到王者】 基础IO

本篇重点&#xff1a;文件描述符&#xff0c;重定向&#xff0c;缓冲区&#xff0c;磁盘结构&#xff0c;文件系统&#xff0c;inode理解文件的增删查改&#xff0c;查找一个文件为什么一定要有路径&#xff0c;动静态库&#xff0c;有的时候为什么找不到库&#xff0c;动态库的…

JavaWeb——003Axios Vue组件库(Element)

目录 一、Ajax 1、同步与异步​编辑 2、原生Ajax&#xff08;繁琐&#xff09;​编辑 2.1、写一个简易的Ajax 3、Axios&#xff08;推荐使用&#xff09;​编辑 3.1、Axios入门 3.2、Axios请求方式别名 3.3、案例&#xff1a;基于Vue及Axios完成数据的动态加载展示​编…

Flink CDC 3.0 表结构变更时导致webUI接口无反应原因

Flink CDC 3.0 表结构变更时导致webUI接口无反应&#xff01; 原因&#xff1a;因为deliverCoordinationRequestToCoordinator和requestJob都是SchedulerNG中方法&#xff0c;该类的线程模型是单线程执行&#xff0c;所以在deliverCoordinationRequestToCoordinator执行表结构…

mysql创建数据库,用户授权

一、创建用户 CREATE USER 用户名% IDENTIFIED BY 密码; flush privileges; 二、更新用户密码 update mysql.user set authentication_stringpassword("密码") where userroot; flush privileges; 三、允许root远程登录 update user set host % where user r…

AIoT网关 人工智能物联网网关

AIoT(人工智能物联网)作为新一代技术的代表&#xff0c;正以前所未有的速度改变着我们的生活方式。在这个智能时代&#xff0c;AIoT网关的重要性日益凸显。它不仅是连接智能设备和应用的关键&#xff0c;同时也是实现智能化家居、智慧城市和工业自动化的必备技术。      一…

c# entity freamwork 判断是否存在

在 Entity Framework (EF) 中&#xff0c;你可以使用 LINQ 查询来判断数据库中是否存在特定条件的记录。以下是一些常见的方法&#xff1a; 使用 Any 方法: using (var context new YourDbContext()) {bool exists context.YourEntity.Any(e > e.Property yourValue);i…

【linux进程间通信(二)】共享内存详解以及进程互斥概念

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; 进程间通信 1. 前言2. 共享内…

2024年2月23日 晨会汇报

Good morning, colleages! This is /ˈdɑː.tʃi/ speaking. As for my report today, I decide to wing it, so I didnt prepare a script. Now, Ill share an update about my recent work activities which encompasses two key area: a summary of my work yesterday a…

【Go channel如何控制goroutine并发执行顺序?】

多个goroutine并发执行时&#xff0c;每一个goroutine抢到处理器的时间点不一致&#xff0c;gorouine的执行本身不能保证顺序。即代码中先写的gorouine并不能保证先执行 思路&#xff1a;使用channel进行通信通知&#xff0c;用channel去传递信息&#xff0c;从而控制并发执行…

基于开源模型对文本和音频进行情感分析

应用场景 从商品详情页爬取商品评论&#xff0c;对其做舆情分析&#xff1b;电话客服&#xff0c;对音频进行分析&#xff0c;做舆情分析&#xff1b; 通过开发相应的服务接口&#xff0c;进一步工程化&#xff1b; 模型选用 文本&#xff0c;选用了通义实验室fine-tune的st…

电脑录屏软件哪个好用?实测告诉你答案(2024年最新)

在当今信息化快速发展的时代&#xff0c;无论是录制在线课程、游戏操作&#xff0c;还是制作教程、会议记录&#xff0c;一款电脑录屏软件显得尤为重要&#xff0c;可是电脑录屏软件哪个好用呢&#xff1f;本文将介绍三款主流的电脑录屏软件&#xff0c;通过分步骤详细讲述&…