- 博客(67)
- 收藏
- 关注
RSS订阅原创 react-router v6嵌套路由重定向
这样配置有一个问题就是当我访问根目录的时候：localhost:1234/。这个时候只会展示Main组件内容，但是我想让他重定向到/feature-management，我配置了。最终的处理结果是：我仅仅把Main组件的path 从。嗯，有点小无语，研究了半天才发现。，然后就可以实现了。
2022-09-08 18:30:51
823
1
原创 React.memo和useMemo的区别及使用
发现问题大家在使用hook进行开发的时候有没有遇到过以下的情况：当我set某一个值的时候，有好多不相关的值都重新进行了计算，当代码量较小的时候可能不明显，但是长此以往会让页面越来越卡。父组件的某个值更新了，但是某些并没有引用这个值的子组件竟然也更新了。以上的两种情况如果一直放任不管的话，随着代码的累计，页面的性能就会越来越差。当用class组件的时候我们可以通过PureComponent或者生命周期中的shouldComponentUpdate方法来进行优化，但是对于hooks要怎么做呢？ho
2022-01-27 18:55:03
7334
原创 使用Mutation Observer监听DOM变化（也许是最完全指南？）
前言打开自己的博客，猛然发现自己已经有快两个月没有更新了，一方面是因为确实没有遇到什么特别值得记录的问题及知识点，另一方面则是所在部门的组织架构调整，唉（????）日子难过啊，没啥心情更新。正题众所周知，我们监听input值得变化，我们可以通过绑定事件来实现。但是对于DOM元素的属性、数据的变化我们应该如何监听呢。这个时候就需要用到我们今天的主角了：MutationObserver，它提供了监视对DOM树所做更改的能力。目前可以监听DOM节点的属性、CharacterData以及子元素的变化。介绍
2021-12-07 18:28:10
3850
原创 webpack中一些你不曾注意到的小优化点
最近在工作之余呢，看了一些关于前端工程化的文章，其中有些我觉得比较有用的用于优化webpack构建速度的点，特地记录一下。当我听到关于webpack优化这个词，第一时间想到的肯定都是用DLLPlugin、uglifyPlugin等插件优化，但是其实有时候一些小小的改动也能让我们的项目得到很大的优化。优化loader的搜索范围这个选项我们可以通过配置对应loader的include以及exclude来减少loader的文件处理数量，从而减构建的时间模块查找的设置我们的工程化项目里都会用到node
2021-10-18 18:49:49
129
原创 React Hooks中如何获取上一轮的state
在最近的项目开发当中遇到了一个问题，就是我需要根据上一轮的state进行一些业务处理，如果是在class中这个很好实现，但是在hooks中该怎么获取呢。最终我在React的官方文档中找到了对应的答案。我们可以通过ref来保存上一轮获取到的state，代码如下function Counter() { const [count, setCount] = useState(0); const prevCountRef = useRef(); useEffect(() => { pr
2021-08-26 17:31:09
2023
原创 关于antd中可编辑单元格的另一种思路
一些题外话我最近有快2个月没有更新博客了，不是我已经忘记了这件事，一个原因是最近一直没有遇到什么值得记录的问题以及知识点。如果要硬写也不是写不出来，毕竟自己每天也有看别人的博客或者知识点。只是我认为这些东西就算写出来80%也是搬运别人的，没有太大的意义。另外一个原因是我的小闺女刚出生，事情有点多。进入正题因为新的需求中需要用到可编辑单元格的表格，所以就阅读的antd的文档看有没有合理的实现方案。对于antd中的Table组件大家应该都不陌生，功能非常齐全且强大，使用起来也比较简单。其中就有一个例子是
2021-08-11 17:56:41
896
原创 使用docker-compose部署yapi（前端mock平台）
之前工作都有点忙，而且也没有什么太复杂的问题，所以就一直没有记录博客了。最近终于闲下来，于是自己想鼓捣一个mock平台，否则每次都要等后端的同学提供swigger，会严重影响工作效率。mock平台我选择使用yapi，这个平台功能十分强大，有用户权限，接口管理，自动化测试等等，大家可以去官网做更多的了解。至于部署嘛，各位可以按照官网的方式在服务器上部署，先安装mongo，再安装node环境，再跑各种命令，整个流程虽然长，但也不复杂。而我就不一样了，我比较头铁，想给自己找点麻烦。。。所以我就选择用doc
2021-06-23 17:21:14
798
原创 react-intl国际化踩坑记录
最近的项目中有国际化的需求，经过调研之后决定使用react-intl进行。特地记录一下开发中需要注意的点及踩过的坑。1.在class组件中如何使用以及ts类型的声明通常在函数组件中我们直接通过useIntl这个钩子函数来使用，但是在class组件中是没法使用钩子函数的。这个时候就需要用到react-intl提供的另外一个方法injectIntl。具体使用方法如下// 定义的props要继承react-intl的WrappedComponentPropsinterface ICommonDia
2021-04-13 18:18:26
1797
原创 react hooks中resize事件无法访问到最新的state的问题
最近在开发中遇到了一个比较神奇的问题：const [showTime, setShowTime] = useState(false);...// 调整chart的宽高const resizeChart = () => { if (!graphInstance || graphInstance.get('destroyed')) return; if (!chartRef.current) return; const width = chartRef.current.cli
2021-01-08 16:20:55
1462
原创 react-router在ts中的声明使用
当我们使用react-router进行路由跳转的时候，我们通常都会传递一些参数例如：param，state，query（目前已经被废弃），但是结合typescript使用时，我们需要声明组件的props类型，否则的话我们的tslint就会阻止程序的继续运行，接下来我就介绍一下在react中组件的ts声明：class组件：import React from 'react';import { RouteComponentProps, StaticContext } from 'react-route
2021-01-07 16:29:07
3289
1
原创 详细介绍关于js中的类型转换
在我们日常的开发当中经常会遇到一些类型转换，有些是自己主动转换，有些却是不知不觉中就被转换成了某种格式，这种隐式的转换有些时候会给开发者带来一些困扰。今天我就专门介绍一些自己了解的关于隐式转换的问题。隐式转换的场景： 1.算术运算符。算术运算符一般情况下都会转换为Number类型。但是+运算符除外，该运算符在有字符串的情况下会将运算的值全部转换为string类型。 2.条件运算符。当使用if语句的时候if后面括号内的值如果不是boolean类型时会被转换为boolea...
2020-11-20 16:03:50
178
原创 我对微前端的一些理解
最近要开发的项目中需要用到微前端的内容，所以对微前端做了一些调研，并且总结了一些自己的理解，以问题&答案的形式展示给各位：什么是微前端？摘取了两种自己比较认可的说法：1.一种将多个可独立交付的小型前端应用聚合为一个整体的架构风格。2.微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。通俗点讲就是多个不限制技术栈的前端应用可以组合在一起构建成最终需要的系统（类似于多个组件组成页面一样）为什么会出现微前端？1.中心化的配置.
2020-10-27 20:06:28
327
原创 记录一个flex布局下宽度溢出且不会换行的问题
最近在开发当中遇到了一个属于浏览器的bug：在flex元素下，如果子元素使用display：table并且设置宽度为100%时会出现超出flex元素的情况，并且设置flex-wrap：wrap属性也不会产生换行<div style="display: flex;"> <div>left</div> <div style="flex: 1;display: table;width: 100%;background: red;">righ
2020-09-17 20:33:18
3919
原创 windows下superset源码安装(前端向&踩坑指南)
最近公司需要基于superset框架进行一些开发工作，所以需要在本地部署superset并且进行修改，但是安装总是各种失败，用了接近2天的时间，可恶！！！。必须记录下来希望后来人可以少踩点坑。安装开始所需环境：（python(最新版即可)，node环境（前端应该都有，就不赘述了））1.安装python环境安装最新版即可，最新版的python自带pip打包管理工具。这一步唯一需要注意的点就是在安装的第一步要勾选将python添加到path中2.下载superset源码（https://gi
2020-08-18 19:00:36
3514
10
原创 关于在less中使用calc失效的问题
最近自己也是换了一份工作，开始从事vue的开发，之后也会记录一些自己vue方面遇到的一些问题进入正题：最近在开发当中遇到了一个问题：当我在less下按照常规的方法使用calc属性的时候，发现calc计算有很大的误差：这是我书写的样式：最终渲染出来的样式：原因：从数值上看，px也被解析成%进行了运算，这个的原因是calc属性在less下解析时会忽略运算的单位，统一使用第一个数值的单位（注意：很多文章上写的是按照百分比处理，这个说法是不正确的，例如将100%换为100em，最终的结果是2
2020-08-14 17:58:19
1522
原创 详细了解flex布局的相关属性
flex布局相信大家已经不陌生了，越来越多的人在开发中使用flex进行自适应的布局。但是呢，有些flex的属性代表什么意思你真的了解吗？下面我就着重说一说不常用的flex属性吧（可能只是我个人不常用 (⊙﹏⊙)）包含元素设置display: inline-flex顾名思义包含元素即包含inline的特性也包含flex的特性：inline-flex:flex:aline-items：baseline/flex-start/flex-end常用的center就不多说了，fle..
2020-07-05 16:25:40
1600
原创 带你从零开始了解微信小程序开发
写在前面：此文章针对有一定开发经验的人，如果你对前端一点都不了解，不建议从小程序作为插入点。文章中只说一些自己整理出来的认为比较关键的点，不会逐个点的讲。详细了解大家可以访问官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/项目之前：首先你的申请一个属于自己的微信小程序（O(∩_∩)O哈哈~）1、登...
2020-04-29 18:36:37
374
原创 React Hooks实战中useEffect踩坑记录
最近一直在看ReactHook的相关知识，奈何没有实际的项目开发，于是乎上周新来的需求就决定用Hook来做，特此记录一下开发中遇到的一个印象比较深刻的问题：使用useEffectt进行性能优化时出现无限运行的情况：出现这个问题的原因是因为useEffect的第二个参数数组中的值为对象或者数组：React中判断是否需要执行useEffect内代码是通过Object.is进行判断的，...
2020-04-08 17:43:11
8555
原创 React之Refs&DOM
因为前两个月的新冠疫情公司的开工时间都有延迟，在家里待着蹭吃蹭喝逐渐忘记自己还是一个IT从业人员，复工之后才逐渐回神，想起自己还有博客。哈哈哈最近开发时遇到了关于ref的使用，看了文档之后了解到refs的使用在16.3版本之后已经出现了变更，就此记录一下16.3之后版本的Ref推荐用法(React.createRef())：1.简单使用：// 代码引入了typeScript//...
2020-03-11 18:53:29
542
原创 echarts下的slider的高度调整
开发中遇到的问题：在echarts下的缩放滑动条在文档中没有对应的高度设置项；通过尝试以后发现可以直接设置height属性对高度进行控制或者是通过top bottom 属性联合使用对高度进行控制特地记录一下...
2020-01-19 18:36:06
1357
原创 关于box-shadow的一些深入使用
在以往的开发中 ‘box-shadow’这样的属性是经常使用的，相信大家都不陌生但是最近的开发中遇到了这样的需求：就是不规则形状的阴影，这种需要怎么实现呢我的思路是：将一个正方形定位到左侧中间并且旋转，然后设置阴影然后是这样可以看出右侧也有阴影产生这个明显不符合要求（box-shadow: 0px 0px 3pxrgba(0, 0, 0, 0.1)）查询资料后发现：box-s...
2020-01-19 18:29:08
350
原创 学习React Hook后的一些理解
第一次接触React Hook是在9月份的一次面试中，当时面试官问我你知道Hook吗？我当时就是？？？（大家自行脑补表情包）后来着急找工作，入职后刚开始也比较忙，渐渐都快忘记了这个事了。以至于React中文版中加了Hook之后一段时间我才看这个。下面记录一些看了官方文档自己的一些记录及见解：stateHook： 在没有hook之前 无状态组件就是指函数组件，但是有了ho...
2019-12-17 18:56:13
289
原创 记录两种使用CSS实现等高布局的方法
最近开发遇到的问题：一行内的两个元素需要动态的等高，即左右两个div的高度是不确定的，但是需要等高排列当时考虑了好久，网上也有很多的解决方案，但大多都是固定高度的，不太符合实际的要求，于是在此记录一下：1.使用flex布局的自适应高度（推荐）<div style="display:flex;width: 200px;"> <div style="flex:1...
2019-12-10 18:34:02
412
原创 关于react中setState的异步及同步
容我先记录一些开发中遇到的有趣的东西(O(∩_∩)O)：console.log(typeof ('' || null));console.log(typeof (null || ''));console.log(typeof (null && ''));console.log(typeof ('' && null));// 这个需要对逻辑运算符有一定的...
2019-12-03 18:39:23
245
原创 顺序播放几段音频
开发的时候遇到的问题，有三段音频，需要按照一定的顺序进行播放。原理的话就是监听Audio对象的ended事件，触发时更换播放资源，然后播放，下面是代码：export const playWithOrder = (playArr) => { if(playArr.length === 0) return; // 创建Audio对象 设置对象属性 const aud...
2019-11-25 18:43:33
524
原创 记录一个自己写的用于验证表单数据的方法
在一个开发项目中表单的提交没有用到网上的插件或者组件，所以的话就想写一个用于验证的公共方法，以后也可以复用：/** * 进行表单的基本验证 * @param {IRule[]} rules 验证的规则数组 * @param {IValues} values 表单数据对象 */export interface IRule{ name: string; type: s...
2019-11-20 11:24:32
202
原创 记录一些typescript的内容以及最近开发遇到的问题
嗨呀，好久没有看博客了，9月份开始找工作，到现在终于稳定了下来，不容易呀不容易新的公司要用typeScript+react进行开发，自己之前没有接触过，于是经历了一波埋头苦学的日子，也记录一下自己对于typeScript的看法：我认为的typeScript是在js的基础上，增加了类型的判断（包括变量类型、参数类型、函数类型），如果类型不一致是不允许通过编译的，这样的好处就是可以编写出格式类...
2019-10-24 19:20:32
251
1
原创 一些web前端面试题的总结
最近呢，出去面试了几家公司，就此记录一下我印象比较深刻的一些问题吧：在ES5下实现const的功能（还问了const定义的对象和数组能否修改，为什么）var const_=function (varName,value){ window.varName=value; Object.defineProperty(window,varName,{ enumer...
2019-08-06 18:29:07
232
1
原创 vue init 失败 Failed to download repo vuejs-templates/webapck-simple: Response code 404 (Not Found)
今天自己使用vue-cli时出现的问题，当使用vue init webpack project这个命令时出现了失败的问题，百度上的方案感觉都不太靠谱自己记录一下:首先就是检查vue、node、webpack是否安装，-v（vue是大写V）就可以看到如果都安装了还是有问题，就试试下面的代码（前提是你本地配置了git）：git clone https://github.com/vue...
2019-08-02 17:54:32
2160
原创 webpack配置项详细学习
关于webpack我相信大多数前端工程师都很熟悉，并且也经常使用。但是呢，大多数的时候都是直接拿个脚手架直接一搭，配点东西就不管了，这种知其然而不知其所以然的状态让人很不舒服。所以趁着最近不忙，赶紧整一波；webpack是干啥的？ 用我自己理解的话就是，把项目中用到的多个文件，比如.js、.css、.less、.png等好多个文件，处理成一个或者几个文件，然后html只需要引用一下就完...
2019-07-26 18:13:31
115
原创 关于react下手动判断是否需要刷新页面的方法
最近在开发的过程中遇到了一个问题：使用了echarts的路径图后，定时修改别的状态，不论状态和前一个是否一致，页面总是会刷新，然后图表也会一闪一闪的，感觉很难受，特意寻找了解决的办法，记录一下：react中有一个生命周期方法：shouldComponentUpdate(nextProp,nextState),这个方法如果返回false的话就会阻止页面的更新，通过分别比对props和state的...
2019-06-26 17:22:52
3407
原创 echarts地图中增加图片的实例
这个是自己从官网扒来的实例，自己进行了一些修改，没有什么技术难度，就是增加了一些参数，直接上代码吧var geoCoordMap = { '上海': [121.4648,31.2891], '东莞': [113.8953,22.901], '东营': [118.7073,37.5513], '中山': [113.4229,22.478], '临汾': ...
2019-06-06 17:51:29
3641
原创 关于echarts中Y轴左侧文字显示不全的解决办法
今天在项目的开发中遇到的一个问题，echarts Y轴左侧的文字太多了，显示不全，由于这个问题网上的解决办法相对较少，所以记录一下。先说一下网上的版本：1.调整grid下的left属性，说白了就是调整y轴与左侧的距离，大了就能显示更多的文字grid:{ top:48, left:400,// 调整这个属性 right:50, bottom:50,}...
2019-05-31 18:22:15
18085
2
原创 利用node搭建代理服务器解决在前后端对接过程中出现的跨域问题
最近在开发当中遇到的一个问题：我在我的机器上做好了页面，当我使用ajax请求访问另一台机器的后端服务器时，由于跨域的问题无法进行数据对接调试，后来利用node搭建代理服务器解决了这个问题，特地记录一下。首先声明：这个只适用于前后端对接口与调试的时候使用，对于其他的情况可以自行百度对应的解决办法，个人推荐后端方法解决，只需要修改响应头就可以，前端的各种处理方法都比较麻烦而且有局限性。上代码吧...
2019-05-10 18:20:43
442
原创 初步学习如何利用node搭建一个服务器
最近呢手头的活也不是特别多，所以就静下心来看了看如何使用nodejs搭建一个简易的服务器，话不多说直接进入正题1.首先你的自己搭建node环境，怎么搭建我就不多说的，百度教程一大堆2.搭建好了之后新建一个文件夹，在新建一个index.js文件，内容如下：// 引入需要的包，注意在node中使用的是requireJs,所以不要使用import这种语法，不会被识别const http=...
2019-04-19 18:20:00
222
原创 在react-antd中实现拖放效果
过年回来就没有做过博客了，年初公司的事情有点多，耽误了。进入正题：最近的项目中涉及到了拖放的问题，特地记录一下：这个其实和js原生的拖放基本一致1.在需要拖动的元素上：<Tag draggable={true} onDragStart={(e)=>this.tragStart(e,别的参数)} closable onClose={e=>this.d...
2019-03-22 18:25:05
8191
2
原创 antd-Pro利用fileReader()在前端读取文件内容
前几天在开发中遇到了一个问题，需要通过前端读取文件中的内容，并且显示在文本框内，查询资料后整合的解决方法如下：getTextInfo=(file)=>{ const reader=new FileReader(); reader.readAsText(file); reader.onload=(result)=>{ let targetNu...
2019-01-08 17:45:17
4835
原创 关于react路由传参跳转后刷新页面参数消失
在antd项目的开发中使用的路由是react-Router的路由，在使用是经常出现刷新当前页面后参数消失导致显示错误的问题：解决办法：1.最开始我的解决办法是将参数放在search参数先，然后通过截取地址栏来获取。(不推荐)<Link to={{pathname:'url',search:'参数1',query:{'参数2'}}}></Link>// 接收页...
2018-12-18 19:24:35
19736
8
原创 antd-pro下的form使用注意事项
好久没有更新博客，因为有了新的任务，我负责全部的页面开发，有点心累。。。正题开始：antd-pro下的表单如果使用了getFieldDecorator函数对表单项进赋值的话，那么你是无法通过直接设置value来控制表单的值得，例如：<Input placeholder="请输入" value='XXX' />// 此时赋值会失败，并且控制台会打印错误解决方法：1...
2018-12-18 19:00:46
6757
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人