- 博客(94)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 React-hooks【三】useCallback与useMemo详解，搭配Memo使用
我们知道，react的hook组件再state和props发生改变时，会重新渲染组件，从而导致子组件也会被重新渲染，但有些时候，子组件的props和state值没有变化，子组件就没必要重新渲染，因为如果子组件是一个大型的组件树，这种情况下虚拟DOM（VirtualDom）的比较明显是很浪费资源的，此时就可以进行优化。在我的上一篇博客中有写到，，可以使用React.memo函数包裹子组件，这样在传递给子组件的props的值没有改变时，子组件就不会重新渲染。但是当子组件中的props中还存在函数属性因此而生。.
2022-08-01 22:25:50
2059
原创 React【二】Memo函数第二个传参，props深度比较
在我的上一篇博客中有提到memo是通过对props值的浅比较来决定该组件是否需要更新的，当遇到层级比较深的复杂对象时，就会有些力不从心，对于特定的业务场景，可能需要类似shouleComponentUpdate这样的API，这时可以通过memo的第二个传参来实现。与shouldComponentUpdate不同的是，arePropsEqual返回true时，不会触发render，返回false时则会触发，与shouldComponent正好相反。......
2022-07-20 11:34:53
2635
原创 React 【一】Memo是用来干什么的
React.Memo是React16.6新的一个API,用来缓存组件的渲染，避免不必要的更新，也是一个高阶组件，与类组件的十分类似，不同点在于，React.Memo只能用于函数组件。在react中，组件渲染是最常有的事情。但是，有部分的组件渲染时不必要的，是可以避免的。在react的一般规则中，只有父组件的某一个状态改变，父组件下面所有的子组件不论是否使用了该状态，都会进行重新渲染，这可以称之为无效渲染。...
2022-07-16 16:55:51
2035
原创 超好用！React 封装全屏弹框
web开发过程中，需要用到弹框的地方很多，有时候，产品经理的原型是全屏弹框，而常用的组件库里封装的一般都不是全屏的。如下图所示这就是一个全屏弹框。
2022-07-15 17:01:03
1183
原创 封装常用的表单格式校验（正则表达式）
话不多说，直接上代码！使用方式：1、先引入2、在表单里面使用以上就是常用到的表单格式校验，欢迎大家在下面的评论下面补充！
2022-07-14 16:16:45
374
原创 vue初始化项目时报错： Error: Cannot find module ‘vue-template-compiler‘
出现这个问题的原因是缺少了 ‘vue-template-compiler’ 模块。这类问题解决方案基本上都一样，网上也很多，在这里我写个随笔记录下。1、在项目内运行命令：2、全局安装使用上面两个任意一个方案即可，输入 命令，即可成功启动项目...
2022-07-14 09:55:56
13312
3
原创 超详细-vue3项目初始化配置流程（全流程注释说明）
1. 安装Vue脚手架npm install -g @vue/cli或者yarn global add @vue/cli2. 查看vue版本vue --version3. 利用vue-cli创建项目vue create 项目名
2022-07-13 19:10:17
9762
2
原创 超好用-js数字相加或相减导致精度丢失溢出的解决方案
精度丢失就意味着bug的出现。于是，封装了一个方法，用于解决js中N个数据相加或相减导致的精度丢失，目前该方法只适用于相加或相减，没有封装相乘或相除，如果需要解决相乘相除精度丢失，可以先进行乘除后在使用该方法进行 加 0 或 减 0......
2022-07-13 09:45:45
5615
原创 超好用-Vue、React项目开发中常用到的方法封装
方法汇总1. 判断上传的文件是否为图片格式2.文件导出(下载)方法3. 图片下载方法4. 获取顶部地址栏地址在实际项目开发中，我们总是会遇到各种各样的小问题，功能不难，却要必须写，在这里我总结一些常用到的小方法，以便下次使用时可以直接调用。1. 判断上传的文件是否为图片格式// 自定义封装一个方法， 可以使用 export 导出const judgeImg = (val: any) => { const fileNames = (val + '').split('.') // 将上传的文件
2022-04-20 16:21:13
944
原创 React ant Upload上传组件，使用hooks技术上传图片遇到的问题及解决方案
问题：文件上传失败时不需要回显。思路：添加fileList属性，绑定一个列表，上传成功的文件才加入列表中，代码如下：const [ imgFileList, setImgFileList ] = useState<any[]>([]); <Upload name='upload_file' action="/file/upload/v4" //这个路径是我项目中封装好的路径接口，根据自己的项目接口替换 accept='image/jpeg,image/jpg,
2022-04-20 12:13:47
2986
2
原创 react基础学习（005-react脚手架）
使用create-react-app创建react应用1. react脚手架2. 创建项目并启动3. 脚手架文件介绍1. react脚手架 1. xxx脚手架：用来帮助程序员快速创建一个基于xxx库的模板项目 1. 包含了所有需要的配置（语法检查、jsx编译、devServer...）&nb
2022-03-26 11:53:37
1166
原创 经典面试题：React和Vue中为什么要使用key而不使用index
React和Vue中的key有什么作用，（key的内部原理）1. 虚拟DOM中key的作用2. 用index作为key可能会引发的问题3. 开发中如何选择key?1. 虚拟DOM中key的作用简单的说：key是虚拟DOM对象的标识，在更新显示时key 起着极其重要的作用。详细的说：当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下： 1. 旧虚拟DOM中找到了与新虚拟DOM相同的key:
2022-03-23 16:39:22
221
原创 react基础学习（004-组件生命周期）
React组件生命周期理解旧生命周期1. 组件挂载时的执行过程：2. 组件更新时的执行过程:1. setState() 更新state（正常更新）2. 调用forceUpdate()时（强制更新）3. 父组件render(父组件渲染)3. 生命周期阶段1. 初始化阶段2. 更新阶段3. 卸载组件新生命周期理解组件对象从创建到死亡，它会经历特定阶段react组件对象包含一系列钩子函数（生命周期回调函数），在特定的时刻调用我们在定义组件时，在特定的生命周期回调函数中做特定的事情旧生命周期com
2022-03-23 11:13:47
1529
原创 vue select组件绑定的值为数字类型的问题
在日常开发中，我们双向绑定的form表单，经常会遇到对数字类型的绑定，但对于v-model 绑定的值，输入数字会自动转成字符串类型。对于input输入框绑定的值，想要修改为数字类型很简单，只需要使用表单的修饰符就可以。如下所示number 可以将绑定的 v-model 改为 number 类型<input v-model.number="age" type="number">但对于 select 选择框或者 radio 单选框来说，则没有那么友好了。select option.
2022-03-09 09:45:26
2906
原创 超好用-后端返回图片乱码Vue前端的处理方式
vue处理后端图片乱码问题后端返回的图片信息是乱码的情况时，前端如何将乱码处理成图片后端返回的信息如下图：这是个jpeg格式的二进制流，不是常见的base64，所以需要在前端做一个处理。state.imgUrl = `data: image/jpeg;base64,${btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`将imgUrl的值放入img标签
2022-03-08 17:48:08
4042
13
原创 react基础学习（003-组件实例的三大核心属性）
组件实例三大核心属性1. state 1. 理解 2. 注意2. props 1. 理解 2. 作用refs1. state 1. 理解state 是组件对象最重要的属性，值是对象（可以包含多个 key-value 的组合）组件被称为“状态机”，通过更新组件的 state 来更新对应的页面显示（重新渲染组件） 2. 注意组件中 render 方法中的 this 为组件实例对象组件自定义的方法中 this 为 un
2022-01-26 11:48:11
615
原创 react基础学习（002-react面向组件编程）
面向组件编程1. 创建函数式组件2. 创建类式组件1. 创建函数式组件// 1. 创建函数式组件function MyComponent () { console.log(this) // 此处的this是undefined，因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件</h2>// 2. 渲染组件到页面ReactDom.render(<MyComponent/>, document.getElementById('tes
2022-01-21 17:23:02
350
原创 react基础学习（001-react入门）
react基础介绍1. React是什么2. 为什么要学React3. React的特点3.1 React高效的原因4. 相关JS库5. 关于虚拟DOM 与 真实DOM6. JSX1. React是什么react是一个将数据渲染为HTML视图的开源JavaScript库2. 为什么要学React原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI ）。使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。原生JavaScript没有组件化编码方案，代码复用率低。
2022-01-21 10:26:26
842
原创 Vue路由传参接收以及传参对象为对象时的解决方案
具体代码如下所示：场景：<div @click='toDetail'>查看详情</div>路由传参不能直接传一个对象，需要使用JSON.stringify()方法将其转换成一个字符串，然后在其他页面接受的时候再使用JSON.parse()方法转换成一个对象const router = useRouter()const toDetail = () => { // 我使用的是Vue3，router要从useRouter获取 router.push({ na.
2022-01-20 10:19:48
5589
1
原创 js数组对象去重
有两个数组对象，需要将他们合并为一个对象，并且根据工号去重，如下所示：let arr = [ { jobNo: '1', name: '张三'} { jobNo: '2', name: '李四'} { jobNo: '3', name: '王五'} { jobNo: '4', name: '宋六'}]let arr1 = [ { jobNo: '4', name: '宋六'} { jobNo: '5', name: '宋江'} { jobNo: '6', name: '武松']方
2022-01-20 09:29:04
813
原创 Vue项目中，webfunny前端埋点部署
webfunny埋点1. 新建点位字段2. 新建点位（进入点位仓库）3. 新建项目4. 创建SDK发布1. 新建发布任务2. 下载执行脚本5. 在项目内引入执行SDK1. 方式一：直接在head中添加下载的SDK文件代码2. 方式二： 把下载的js文件作为资源文件引入。6. 数据上报7. 在埋点系统里面配置信息1. 添加分組2. 新增卡片上一篇文章写到了webfunny探针的安装与使用，从而达到对前端项目的监控。本篇文章讲webfunny埋点的使用。想了解webfunny探针安装的请参考我的上一篇文章。
2022-01-19 19:24:35
1454
2
原创 vue项目中，webfunny探针的安装与部署
webfunny探针安装部署过程1. 创建项目2. 安装、部署探针1. 复制探针代码，将探针代码插入到head标签的最顶部2. 在前端代码执行下方代码，注入用户标识信息，越早执行越好3. 切记3. 使用1. 创建项目1、首先需要创建一个应用如果没有团队，则需要提前创建一个团队。项目创建完成后如下图所示：2. 安装、部署探针推荐使用部署方式，需要将探针放在页面的最上方，这样监控的最全面1. 复制探针代码，将探针代码插入到head标签的最顶部具体代码如下图所示：2. 在前端代码执行下
2022-01-06 12:25:24
1469
2
原创 Vue中keep-alive使用详解
文章目录1. 作用2. Props3. 生命周期函数1. activated 2. deactivated4. 缓存所有页面5. 根据条件缓存页面3. 结合Router，缓存部分页面在项目中，当组件中使用了 keep-alive， 切换页面就不会重新渲染，这样有一定的优越性，但有时候也存在一定的困扰。如果组件使用了 keep-alive，那么一定要记住 activated 这个生命周期函数钩子，它相当于原有的created生命周期，可以在里面进行数据的获取。下面是对keep-alive做一个详细的阐述
2021-12-28 11:18:40
835
原创 vue输入框禁止输入表情的实现方法
在开发的功能交付测试的时候，测试提出来文本框不能输入表情的bug（这也算一个bug?哪位大神会进行这样的反人类操作啊），说归说，既然提出来了，那咱还得改不是，具体代码如下所示：首先声明一个输入框：<a-form-item label="" name="searchValue"> <a-input v-model:value.trim="formState.searchValue" autocomplete="off" placeholder="请输入姓名或工号" @ch
2021-12-27 15:40:42
2332
原创 webSocket在Vue中的使用
在项目开发中遇到需要使用webSocket监听日志，在页面上进行展示。但之前并没有开发过这方面的功能，所以在网上找了好多资料，最后成功运行，在此写个随笔记录下。代码如下所示：methods: { // 打开对话框初始化webSocket handleOpen() { this.box = true; this.initWebSocket(); }, // 关闭对话框时关闭webSocket closeDialog() { this.w
2021-12-24 18:38:01
1610
原创 vue表格实现行内编辑功能
效果图如下所示：直接上代码：html部分：<a-table :rowKey="record => record['id']" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns" :data-source="dataSo
2021-12-23 16:21:49
5297
原创 Vue项目导入导出文件功能以及导出文件后乱码的解决方案
vue项目导入导出功能1.导出2.导入1.导出导出功能其实很简单，只需要调用后端的接口即可，不过有一些需要注意的地方，具体代码如下所示：这是导出按钮，定义导出的点击事件：<a-button type="primary" @click="downExcel"> <template #icon> <UploadOutlined /> </template> 导出 </a-button
2021-12-21 16:29:42
4055
原创 avue-crud配置某一列表格数据样式的两种方法
在项目开发中，我们需要对表格数据的某一列或者几列的数据换成突出的颜色。如果是使用ant或者element组件库开发，这是个特别容易实现的功能，但对于avue-crud来说，因为它是对element的二次封装，一系列的属性配置特别多，所以找到合适的属性方法相对ant或者element来说还是有些难度的。下面是我对这种问题的两种解决方法，写个随笔记录下。方法一：使用 cell-class-name属性配置思路：avue-crud 的cell-class-name 属性是单元格的回调方法（也可以使用字符串为
2021-12-19 09:58:39
6102
1
原创 vue父组件调用子组件方法报错的解决方法
vue父组件调用子组件方法报错在父组件定义了一个tab标签页，每一个标签页下面都调用不同的组件，如下图所示：子组件中定义的方法：setup() { const getList = () =>{ const date = moment(new Date()).format('YYYY-MM') loading.value = true apiGetPageList({ salaryDate: date, page: s
2021-12-18 12:15:49
4531
原创 form组件点击重置按钮，使用resetFields()方法无效的问题
resetFields方法重置失效的问题在ant design vue的form组件中，点击重置按钮，调用resetFields()方法，会将表单里的内容清空。但有时候我调用了resetFields()方法，表单内容却没有清空。仔细看了下代码，发现是因为我没有在表单中加上name属性，才导致resetFields()找不到绑定的数据。在此写个随笔记录下这个小问题。代码如下图所示：谨记：在 a-form-item 标签中，一定要加上name属性！...
2021-12-17 12:14:38
3285
原创 element table组件，使用checkbox控制表头的动态显示与隐藏后，排序恢复到默认状态的情况修复
在页面中，点击设置按钮在右边出现一个抽屉，在里面控制表头的动态显示与隐藏。当前端使用sortable属性给数据排序后，动态显示或隐藏的表头，会造成数据回到默认状态，不再根据设置的状态排序。具体如下图所示：为了解决这个问题，我用了很多方法，包括对sort-change、sort-method以及default-sort属性的各种定义使用，但结果都不尽人意。因为当选择显示表头后，要关闭右边弹框，在关闭右边弹框定义的方法里面使用上面三个方法都没有生效，基本上都是因为这几个方法的参数的原因。后来在想ele.
2021-12-10 17:25:46
1170
原创 element table组件根据屏幕大小动态设置max-height属性设置表格最大高度，但设置百分比或者响应式不生效的问题
element的table表格组件有一个max-height属性，可以设置table的最大高度，但是当我设置这个属性的值为百分比或者响应式的时候，却没有生效，如下所示。max-height:calc(100vh - 40px)//或者max-height:calc(100% - 40px)这是因为element-ui的文档，max-height的合法的值为数字或者单位为 px 的高度。无法识别响应式的css。解决方法有以下几种：首先列举出代码：首先设置table组件的ref属性，以及设.
2021-12-06 09:53:23
11978
3
原创 实现element table组件内行与行之间设置间隙效果以及行内的渐变效果以及各种问题
在项目开发中，产品提了这样一个需求：实现表格内每一行之间存在间隙以及渐变效果。具体效果如下图所示：因为element的table组件默认的是行与行挨着，所以需要更改组件的样式，具体代码如下所示：1. 设置行与行之间的间距::v-deep .el-table__body{ //-webkit-border-horizontal-spacing: 13px; // 水平间距 -webkit-border-vertical-spacing: 13px; // 垂直间距}设置这个属性.
2021-12-04 17:12:48
14736
2
原创 element table组件实现保留横向滚动条，去除纵向滚动条
实现仅去除纵向滚动条效果项目开发中，有这样一个需求：实现表格内容自动滚动，去掉纵向滚动条。代码如下所示：::v-deep ::-webkit-scrollbar { width: 0; height: 0;}这种写法确实实现了去掉了纵向滚动条的效果，不过对于我的项目来说，却存在一些问题：因为我的表格的表头是可以动态控制的，所以当默认展示的时候，表格横向宽度足够，不存在滚动条的现象；但当表头全部展示的时候，右侧部分内容展示不出来。因为上面的css代码是将横向以及纵向的滚动条全部给去除了，
2021-12-04 16:04:57
5523
原创 vue项目点击左侧子菜单，打开一个新的浏览器标签页
在项目开发中，产品给了这样一个需求：点击左侧子菜单，在浏览器中打开一个新的标签页，展示数据大屏。在此写个随笔记录下实现过程。思路：使用编程式导航实现页面跳转，我们常用的是 $router.push 和 $router.go，但是Vue2.0以后，这种方式不支持新窗口的打开属性了，所以这个时候可以使用this.router.go，但是Vue2.0以后，这种方式不支持新窗口的打开属性了，所以这个时候可以使用this.router.go，但是Vue2.0以后，这种方式不支持新窗口的打开属性了，所以这..
2021-11-27 17:31:11
6959
5
原创 Vue组件中通过v-for循环动态生成form表单进行表单校验
在做项目时，需要根据需要动态添加或新增表单，同时还需要对表单做校验。详情如下图：刚开始做表单验证的时候，对于这个动态的表单验证有点难搞，试了好几种方法都没有搞定。最后按照下面这种方法实现了，以此篇博客留作记录，方便下次遇到类似的需求时直接开发。<a-form :model="warnData" ref="warnDataRef" :rules="rules" :label-col="labelCol"> <div class="title"> <strong&
2021-11-03 18:19:50
9294
4
原创 vue组件中实现一键复制到剪切板功能
这里写自定义目录标题vue组件中实现一键复制到剪切板功能1.安装 vue-clipboard32.使用vue组件中实现一键复制到剪切板功能1.安装 vue-clipboard3npm install --save vue-clipboard3// 或者yarn add vue-clipboard32.使用<template> <div class="content"> <a-button type="link" @click="copy"
2021-11-03 16:01:28
501
1
原创 在element组件中自定义组件的样式不生效问题（vue scoped scss无效问题）
当我们在项目中需要给element组件加上一些自定义样式的时候，往往是不生效的。这是因为Vue项目中使用第三方框架的时候，Vue中有scoped，声明了样式是在组件范围内生效的，避免了不同组件的样式污染。解决方法1. 去掉scoped这种方法确实可以实现效果，简单粗暴，却会造成不同组件样式污染，不建议。2. 使用 /deep/ 深度修改标签样式找到需要修改的 element标签的类名，然后在类名钱加上 /deep/ ，可以强制修改默认样式。这种方式可以直接用到有 scoped 属性的 sty.
2021-09-14 18:16:38
6236
原创 在v-for渲染的列表中使用三元表达式动态绑定class类
在v-for渲染的列表中使用三元表达式动态绑定class类在项目中，需要用到 v-for 来渲染一系列div，根据每一个数组对象里的一个字段，动态的显示出不同的颜色，需要动态绑定类。<div v-for="(item, index) in logsList" :key="index" class="content_item" id="content_item"> <div style="margin-bottom: 4px"> <span>{{item.ti
2021-09-14 17:41:35
1822
前端React中函数式hooks组件中关于ref使用介绍，以及forwardRef 与 useImperativeHand详解
2022-11-30
infitiy浏览器插件
2022-11-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人