【随笔四】JavaScript 中的 rest 某次开发中,看到项目代码中用到了rest这个参数,但又没看到在哪里定义或者传入,当时没太理解它的意思,查了下资料才恍然大悟。含义也很简单,写个随笔记录下。
后端接口返回近万条数据,前端渲染缓慢,content Download 时间长的优化方案 按照上面的方法,页面初始化的时候确实比之前快了很多,大概有一倍左右。不过直接跳转到最后一页,接口还是会有些缓慢。不过,对于上万条数据,也很少有人会直接跳转到最后一页进行搜索,毕竟上面也是有筛选条件可以进行筛选的。总而言之,也算是完成了性能优化。前端性能方案有很多种,比如 SSR,只是目前暂时还未了解,以后慢慢掌握。本篇文章介绍的方法只是其中比较特殊的一种,正常来说,我内心还是比较偏向于 gzip 压缩处理的。
【随笔三】一篇文章理清 节流、防抖以及应用场景 防抖 和 节流 很多人特别容易把概念混倄,今天,一篇文章教你彻底理清其中的概念及应用场景。先说共同点防抖 和 节流 函数都是为了 限制函数的执行频次,从而优化函数触发频率过高导致的响应速度跟不上触发频率,导致出现延迟、卡顿的现象以及其他错误。 是常见的前端性能优化技巧。但应用场景不同防抖防抖通常用来处理一些高频触发的事件,比如用户连续点击按钮、输入框频繁输入。当用户点击按钮过快,导致重复点击,多次调用接口;或者输入框的文字一变化就调用接口,导致多次调用接口。
avue-crud组件的行内编辑实现失焦保存,在没有右侧操作栏的情况下 cell、blulr,我在官网配置文档上并没有看到。可能是官网文档进行了升级,记得去年的时候官网配置项文档并不是如今这个样子,里面的配置项很多。不要以为官网上没有该属性的介绍就真的没有,要勇于质疑,自己可以先写着试下,总归会发现新大陆的。其次,avue 框架确实可以极大的提高开发者的效率,减少页面开发工作,但前提是你要熟悉 avue框架的各个配置项。因为它的配置项实在是太多了,如果不是太熟悉,真的不如使用 element 进行开发来的方便。
【随笔二】useReducer详解及其应用场景 useReducer实际上是 useState 的升级版,都是用来存储和更新 state,只是应用的场景不一样。一般情况下,我们使用useState就足够项目需要了,不多当遇到以下场景时,使用useReducer 会更好些。
useEffect 通过 form.getFieldValue(‘xxx‘) 监听 Form表单变化 Form 内置方法,不是响应式的(即不是一个state),由其设置或者获取的值,不会触发UI更新,只能对变更的field进行刷新。想要对其进行监听也很简单,将其变成一个state即可。
【随笔一】forwardRef 包裹的子组件尽量不要与 FC泛型搭配使用 的一个泛型,表示 函数式组件,是 function component 的缩写。于是换了种写法,子组件使用普通的函数式写法,此时搭配。包裹,方便获取子组件的特定方法和状态。可以让函数组件定义更加清晰和类型安全。此时,父组件上绑定 ref 不会报错。开发中,遇到了这样一个问题:使用。绑定在DOM上面不应该会报错才对。定义一个函数式组件,然后使用。首先,我们先了解下什么是。
redux 详解(带你学习store、action、redux) react 用了一年多,但一直对 redux 了解不多,一直想找个机会彻底掌握它,所以有了今天这篇文章,如果你也对 redux 不够了解,那么可以仔细阅读下,相信会有所收获。
echarts 饼状图 label 既在内部显示数值(百分比),又显示外部指示线 配置项,可以看出,series 是一个数组(如上图所示),既然单个中只能出现一个,那么我配置成 2个(多个)相同的对象,让他们重合,就会出现两个 label 标签,一个在内部展示,一个在外部展示,就可以完美解决这种情况。其中,formatter 是标签内容的格式器,用于转换格式。series 中(即其中的一个对象中),只能设置一个label。属性 是 用来配置 外部指示线(第一段、第二段)的长度及样式的。不过也好解决,通过查看 echarts 官网。查了下 Echarts 官网文档,需要配置。
cmd 窗口、记事本打开后一片空白且几秒钟后闪退的问题解决方案汇总 不过最后我的电脑还是正常了,操作也很简单:在windows 系统更新里面,恰好有一个新更新的win11 版本,我进行更新重启之后,这些问题就莫名其妙的解决了。看来果然如 微软工程师 所说:是系统漏洞,不过估计他也没有想到的是:这么快就将这个漏洞给修复了,哈哈哈哈。如果大家电脑出现了问题,建议大家可以联系对应电脑的服务热线,转人工客服或者联系微软人工客服。一般情况下,都会进行免费且正规的指导和远程调试。
vite 项目切换不同依赖项的分支,运行加载缓慢问题的解决方案(Pre-bundling dependencies) 当我们在首次使用yarn dev命令启动vite时,或者切换分支,依赖项发生变化时会发现项目启动时相当的慢,大概要十几分钟,而且控制台终端打印了如下信息:遇到这种情况时,真的是相当恶心,有时候项目启动完成要花费半小时的时间,着实是浪费时间。知道了问题出在哪里,就能对症下药,问题也会很快妥善解决。
js中浅拷贝与深拷贝的区别及方式 JavaScript 中存在两大数据类型基本数据类型保存在栈内存中,按值存放的,可以直接按值访问,即引用数据类型保存在堆内存中,引用数据类型的变量,是一个浅拷贝 和 深拷贝 是指在复制一个对象时,拷贝的深度不同。
前端js实现根据文件url批量压缩下载成zip包 项目开发中,产品经理提了这样一个需求:将系统中的附件实现批量打包下载功能。本来系统中是有单个下载及批量下载功能,现在应业务方的需求,需要多加个批量打包下载。初步设想是:由后端编写接口实现。但后来经过思考:现在系统中已经有文件的url地址了,何必让后端写接口重复,前端处理就行。
useContext 详细解析 及与 createContext 搭配使用解决祖孙多层组件之间传参问题 创建一个Context对象,当React渲染一个订阅了这个Context对象的组件,这个组件会从组件树中离自身最近的那个匹配的Provider中读取到当前的context值。只有当组件所处的树中没有匹配到Provider时,其才会生效。
react hooks 中使用 Echarts图表中遇到的问题及相关配置 项目开发中,需要做一个报表功能,看了下UI图,初步定下使用echarts,不过之前使用echarts都是在Vue2和Vue3框架下开发,第一次使用开发 echarts,将流程及一些 相关配置 写个随笔记录下。