![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 51
React全家桶
枕着光的她
十年生死两茫茫,写程序到天亮
展开
-
React 路由v6 抽离成路由表 重定向 及 嵌套路由
这时候一个简单的路由表已经完成了,假如访问路由的时候,我想在App.js中渲染页面。首先在页面上导入路由表文件, 使用路由中的 useRouter( 路由表 ) 得到的结果就是,path路由对应的页面。index.js 写路由表, path:路由名称, element : 路由对应渲染的组件名称。Navigate 重定向;上面一个简单的路由抽离写好了。现在 homebox 页面有子级路由, 只需要在你想渲染的地方加上, 渲染的时候只会渲染到这个标签所占位置上。原创 2023-02-25 11:29:46 · 839 阅读 · 0 评论 -
React前端面试宝库
React是构建用户界面的JavaScript库,只提供了UI层面的解决方案,遵循组件设计模式,声明式编程,函数式编程,使用虚拟DOM来有效的操作DOM,遵循高阶组件到低阶组件的单项数据流。强缓存: 他不用向服务器发送请求, 他直接可以从缓存里面读取数据,在chrome 控制台的network 选项中可以看到该请求返回200的状态码。原创 2023-05-04 20:38:01 · 419 阅读 · 0 评论 -
React 监听滚动条变化,实现返回顶部效果
使用hooks方法导入useRef, 给盒子绑定ref‘’获取页面到顶部的距离在做一系列操作。给最外层盒子绑定ref。通过window.addEventListener 来监听滚动条的变化 通过 .current.scrollTop 获取页面到顶部的距离在做一系列操作原创 2023-04-01 10:39:02 · 2139 阅读 · 0 评论 -
React实现添加购物车小车抛物线效果
向页面底部抛掷小球,css动画, 立方贝塞尔曲线。点击按钮,先将小球移到点击的地方。设置个定时器(可以重复点击)创建一个小球Div ,(可以设置好曲线弧度,直接复制)原创 2023-04-15 11:48:53 · 600 阅读 · 0 评论 -
React-router v6 路由守卫/导航守卫/路由拦截
通过创建一个高阶组件,在没有登录的情况下,跳转到login页面,否则就返回 请求的页面。文件中编写一个高阶组件,(高阶组件:接受的参数是一个组件,通过判断返回一个新的组件)能够在没有登录的情况下(没有token),拦截路由跳转登录页面,有token的时候进入Home (主页)页面。创建AuthRouter.js 文件。没有token的时候跳转到登录页面。原创 2023-03-15 15:41:35 · 2081 阅读 · 8 评论 -
Redux异步处理中间件redux-saga的使用
使用起来比较简单,在action中处理异步等副作用操作,此时的action是一个函数,以 dispatch,getState作为形参,函数体内的部分可以执行异步。这个的执行原理,当我们页面dispatch的使用,saga.js 会对里面的type 类型进行判断, 如果一样就证明是异步的,你可以去做一些操作,控制数据更新的时机。(2)action是普通对象,这跟redux同步的action一模一样。(5) 异步操作的流程是可以控制的,可以随时取消相应的异步操作。原创 2023-05-21 20:23:31 · 354 阅读 · 0 评论 -
React 使用react-sortable-hoc 实现拖拽效果
改成下面这样就能使用了,讲以前用到 arrayMove 的地方都替换成 arrayMoveImmutable;在react中实现拖拽效果我使用的是react-sortable-hoc 这个库,首先安装这个库,在我的项目中会报错,应该是版本更新替换了这个方法,原创 2023-03-27 19:52:52 · 1544 阅读 · 0 评论 -
React+Antd 实现数据的触底加载(koa2后端数据)
触底触发函数,再次请求接口,这时候得到的是10条数据。依次循环直到后端返回false 数据请求完了。后端返回true,将数据条数加5,首次请求接口渲染5条。原创 2023-03-28 11:10:43 · 292 阅读 · 0 评论 -
React中使用Redux、React-redux
上一章配置完React 中v6路由的抽离使用,那么在项目开发中需要统一管理数据,vue中使用的是vuex,而React 中使用的是 Redux(并不是react官方提供的库),react-redux,下面就将路由,redux,react-redux 来结合起来使用。这时候store定义的数据就传过来了,因为我没写数据,所以数组为0,这时候就可以store来统一对数据的管理。redux和组件进行对接的时候是直接在组件中进行创建。里的数据,还要使用connect将组件和react连接。这时候会有一个问题,原创 2023-03-13 20:44:33 · 187 阅读 · 0 评论 -
React,Vue3自定义Hooks
使用 Axios 进行异步请求的组件中使用这个自定义 hooks。下面用React封装一个异步请求的Hooks。Composition(组合式) API。可以调用React的内置hooks。使用Vue封装一个自动获取焦点的。原创 2023-09-06 18:59:48 · 131 阅读 · 0 评论 -
React项目中使用Fabric.js
Fabric.js是一个强大且灵活的JavaScript HTML5 canvas库。它允许你通过一种友好且易于使用的方法创建和处理对象。总的来说,Fabric.js是一个非常强大的库,用于创建和处理HTML5 canvas图形。它的友好性和易用性使得开发者可以快速上手并创建出复杂的图形和动画。原创 2023-10-30 13:54:08 · 624 阅读 · 0 评论