
react
文章平均质量分 76
爱思考的猪
这个作者很懒,什么都没留下…
展开
-
redux的实现(包含combineRerucers、applyMiddleware、react-redux的connect)
Redux的核心思想很简单,就是一个发布订阅监听数据的变化,再限定只能通过dispatch去更改数据。数据来源唯一数据只读,只能通过dispatch修改数据reducer是一个纯函数实现一个发布订阅实现combineReducers对reducer进行切片实现react-redux的connection函数,将发布订阅和视图渲染关联到一起实现applyMiddleware。原创 2022-11-11 16:58:45 · 627 阅读 · 0 评论 -
redux中间件的实现思路
知道了redux中间件原理后,现在来手动实现一个中间件。- 这里applyMiddleware的作用是时dispatch可以接收一个函数,并使用函数柯理化编排middleware。- redux-thunk的逻辑也很简单,判断如果action是个函数就执行这个action,否则继续执行编排后的柯理化函数。- 注意函数执行的顺序,[thunk,logger2,logger1 ]的执行顺序是logger1、logger2、thunk。thunk必须放到最后执行,否则会提前执行action,漏掉其它中间件的执原创 2022-11-10 19:27:56 · 274 阅读 · 0 评论 -
Redux Tool Kit(RTK)的使用
RTK是redux的开发工具,以配置的方式编写redux逻辑,能减少样板代码和错误代码,其中还内置了redux-thunk等一些基础插件, redux官方强烈推荐使用RTK。原创 2022-11-09 16:42:35 · 648 阅读 · 0 评论 -
react-query的介绍和使用
react-query是一个异步状态管理的hook,内置了loading,error等状态。原创 2022-11-09 09:48:38 · 7086 阅读 · 0 评论 -
redux的概念介绍和基础使用
当前端项目越来越庞大,使用到的诸如缓存数据、服务端数据、本地持久化数据也就越来越多,mode的变化会引起view的更新,而mode的来源是不确定,经常是错综复杂,甚至十分混乱的,遇到错误时很难排查和追踪。你可能使用过React中的context(上下文)把状态提升到顶层,被所有的子组件共享,这样还避免了props的层层传递。Redux也是一款类似的状态管理工具,不过它的功能更加全面,它是独立的,不仅仅可以应用在react中,还可以应用在javaScript项目中。原创 2022-11-06 17:12:36 · 586 阅读 · 0 评论 -
React Router v6的使用以及v5升级v6的一些问题
传统的多页应用: 改变url请求对应的html资源单页: 单页一次请求所有的资源, 首屏加载会比较慢,后续通过路由切换组件,只需要请求数据单页首屏渲染耗时多,不利于SEO,页面切换流畅,前后端分离,用户体验好,多页利于SEO,每次页面切换都要请求资源会对服务器有一定压力,影响用户体验。单页在经过分片和路由懒加载后性能会好过多页,因此现在的前端工程化项目一般都是使用单页,当项目体量非常庞大的时候再考虑拆分多页。原创 2022-10-23 19:16:02 · 1526 阅读 · 1 评论 -
react-router v5的使用
给Route添加exact属性开启精确匹配。被Switch包裹的组件只渲染一个。使用 /* 匹配所有路径。Route渲染组件的的方式有element、render、children,render和children是通过函数渲染可以获取路由的参数。将每个模块的路由单独抽离封装,再以数据驱动的方式渲染Route更有利于路由的重组和耦合,提高代码复用。使用withRoute()方法获取history、location、match对象。其中包含路由动态匹配的参数以及url中的query参数。原创 2022-10-16 23:31:30 · 1126 阅读 · 0 评论 -
TypeScript的使用(上)
TypeSecript是JavScript的超集,提供了类型检测功能,ts的类型检测是在编译阶段。TypeScript适用于复杂的大型协作项目,提升开发效率和降低代码维护成本。typeScript提供了numbe、string、boolean、undefined、null的基础类型,数组的类型有两种表示方式,还可以使用元组表示具有多种数据类型的数组。对象类型用interface定义,Object.proptotype的属性使用ts提供的Object类型。原创 2022-10-13 21:55:56 · 1329 阅读 · 0 评论 -
Reack hooks的使用
react16.8推出hooks更好的支持函数组件,使用函数组件更容易进行代码的复用,拓展性更强。useEffect、useState、useMemo、useReducer、useRef、useContext、useLayoutEffect、useCallback、memo、原创 2022-10-11 11:37:29 · 424 阅读 · 0 评论 -
React的高阶组件(HOC)
高阶组件的作用有代复用、代理属性、拦截渲染、劫持生命周期反向继承能直接操作和拦截组件的state和生命周期,功能比属性代理更加强大。原创 2022-10-10 21:38:48 · 633 阅读 · 0 评论 -
JavaScript中的一等公民: 函数(Function)
函数的基础使用使用函数表达式或者函数声明去创建一个函数函数声明整体提升,函数表达式只提升变量匿名函数构造函数构造函数返回一个对象,使用new操作符执行构造函数构造函数执行的过程:1. 生成一个对象将this绑定到这个对象 2. 执行构造函数的代码 3.返回结果构造函数默认返回一个对象,手动返回应用类型的数据将代替默认的返回结果闭包闭包产生的三个条件:1. 函数嵌套 2.内部函数使用了外部函数作用域内的变量 3.被返回的内部函数在外部作用域有被引用。原创 2022-09-21 09:31:11 · 592 阅读 · 0 评论 -
react+NodeJs部署阿里云完整流程
一.目录结构/boot: 存放启动程序/dev: 存放设备文件/etc: 存放启动,关闭,配置程序与文件/home:用户工作根目录/lib: 存放共享链接库/lost+found:系统出现异常时,用于保存部分资料/media: 光驱的自动挂载点/mnt: 光驱、硬盘等的挂载点/opt :第三方应用的安装 数据库等/proc: 操作系统的实时信息/root:超级用户的工作目录/srv: 服务启动后需要提取的信息/sys: 系统中的硬件设备信息/tmp: 存放临时文件/sbin:系原创 2020-08-31 21:03:12 · 600 阅读 · 0 评论