前端心酸修炼之路

Posted 2023-02-23 煜成'Studio

刚毕业入职，是个真真的菜鸟，记录一下我工作中遇到的花了好长时间才解决的问题（也有一些少个符号之类的问题也花了好久才发现，哈哈，那种就不记录了）
22/10/13
用ajax从后端拿到数据是promise的形式，用async await包一下就可以拿到想要的数据了；
搜索框防抖的处理，我用的是Lodash的debounce，老哥和我说还可以用ahooks的防抖
10/14
用mobx的全局变量的时候，取到的数据包含在mobx的对象内，其实直接可以用这个数据，想要看数据具体的形式，可以加一个toJS(变量)查看；
可以放到全局仓库（例如mobx）的数据就放进去，多组件使用的时候真的方便
10/15周六
一部分宽度固定一部分自适应的布局，用flex非常好用，父元素display: flex，固定栏flex: 0, 0, 宽度值，自适应处flex: 1, 1, auto;
10/17周一
看别人的代码，一定要抓住别人的代码重点部分在做什么，通篇读往往理解的很模糊，特别是使用了项目仓库中全局变量的时候，适当抽离出合适代码，敢于改别人的代码；
对象是引用类型，定义完立即打印可能不是定义的样子，可能是后面有的语句改变了它的形式；
搜索栏附带搜索结果的组件可以使用antd的select搜索栏，内部有防抖设置，样例的代码组件嵌套的很繁琐，自己修改一下，不要用autocomplete了
10/18
使用echarts的矩形树图的时候，想要获取挂载的dom元素，用了const ref = useRef()，结果ref导入的时候类型不对，卡住了，问了老哥才知道点进去useRef可以看到ref.current才是我想要的dom元素。根据官网在react组件中使用的时候放在useMount里进行执行；
flex布局真的强大，flex-base可以用百分比定宽，很好用；
使用antd radio的时候，需要修改默认颜色样式，直接从该元素上看它添加了哪些类，有点击切换的场景要看新增或取消了哪些类
10/19
还是上次对象引用的问题，不清楚为什么对象的修改在后面，对象在之前打印出来的竟然有后来的修改内容，难道是因为构造函数或者类一步提到作用域最前面了吗?；
还有，从后端拿到的数据，如果只是需要在页面展示的时候英译汉的操作，一定要放在展示前再操作，不要拉到后端数据就修改，因为可能后面很多操作都和原始的数据相关，到时候就是一团乱了；
菜菜的我竟然不会浏览器console面板debug，辣鸡，无形中被老哥内心嘲讽了，哈哈，赶紧学一波
10/20
antd tags组件items属性提示有错误，原来项目中的是老版本，不兼容，可以用老版本的方法写，发现还不能用，项目中别人也应该是老版本呀，看了别人代码才发现自己对老版本没有灵活运用；
老哥帮忙只做页面的展示，看着他得心应手地在项目中修改路由、修改主题、灵活运用控制台，啥时候我能向他一样独当一面呀；
一定要多些注释，有些逻辑复杂了自己几天后就没啥印象了，何况几个月后自己看或者别人看，更难看懂了，而且有注释，防止出错概率也变小了，逻辑思维也变快了；
因为子组件只有部分值改变了，所以react应该是diff后发现有些部分不需要更新就没更新，结果不是我们想要效果，最终用了个小技巧，自己再写一个小组件，不同情况调用不同组件，这样就不会被diff掉了
10/21
今天又犯了一个低级错误，setState后直接就console看一下它的值，还在想为什么，哈哈，setState是异步搞得鬼
10/23周日
上午做时间列表图，用row col取代了之前用table的方法，果然老哥直接说用row，我当时都没理解，才反应过来;
下午把之前的样式改了下，对css布局有了新的体会，如果是全局中某一部分的结构，一定把布局样式写在该结构的组件，不要放在全局架构上，这样每个结构组件间切换比较方便，而如果是某一个确定的细小组件，布局样式一定不要写在组件内，因为这个组件需要被复用，在哪个结构组件内需要，就在哪个结构组件内设置它的布局样式
10/25
这两天赶业务，一直在修bug，今天发现antd table想要滚动的话，高度不能自适应父元素的高度，只能设置定值，于是搜索解决方案，这个好用，getBoundingClientRect()，链接:https://juejin.cn/post/6922375503798075400
10/26
一顿疯狂改bug，上午有了心得，如果在改bugA时，发现有bugB，和A没啥关系，好像改起来也不难，一定不要停下来去改B，因为B可能没那么好改，我就是B看起来好改，结果没改明白，再回头改A，发现A又存在其他问题了，浪费了好长时间。一定要一个bug一个bug地改，不要以为自己很牛可以一次改很多bug
10/28
一个看似逻辑清晰的需求弄了一天也没完成，哭了，最终换方法了，是真没研究明白，antv g6，在node的click事件中使用全局变量，之后在其他组件全局变量改变了，但是点击node，node的作用域里使用的全局变量竟然是初始值，老哥说是graph又被注册了一次，使用注册时的值，我尝试解决但最终无果，老哥请假了，也许在现场会帮我改明白；
在控制台的sources中左侧找不到执行的文件，ctrl shift p搜索路径下的文件名可以找到。
10/31
vscode点击进去函数后，Windows: Alt + ‘-’ （有的是 Alt + ‘←’）可以返回上一个文件
11/2
后端接口，前端通过这个接口返回数据，直接将函数名命名为后端的接口名称比较好，接口一多，方便查询；
antv g6真的厉害，changeData可以更新数据
11/7
在做横向滚动条的时候，overflow和nowarp设置后竟然不显示横向滚动条，那就在样式中修改一下，可以分别对整体，移动方块，轨道进行样式设计
/滚动条样式/
.cal_bottom::-webkit-scrollbar /滚动条整体样式/
width:4px;/高宽分别对应横竖滚动条的尺寸/
height:4px;

.cal_bottom::-webkit-scrollbar-thumb /滚动条里面小方块/
border-radius:5px;
-webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
background:rgba(0,0,0,0.2);

.cal_bottom::-webkit-scrollbar-track /滚动条里面轨道/
-webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
border-radius:0;
background:rgba(0,0,0,0.1);

12/4
好吧，我竟然一个月没更新了，不是没遇到难点，而是遇到难点自己都能解决了，可能花的时间很长，但这一个月里确实几乎没有再麻烦小前辈了。但我应该是还没有到达轻车熟路的地步，只不过是相对之前处理起来得心应手了一些。最近这期间也有很难的点，比如图谱反向中层级的设置，最终还是问了他人然后加上看文档解决的（后来才发现我一直看的文档竟然不是最新版），包括现在遇到的难题（组中实体全部展开），官方文档有方法，但实际业务代码中处理的话却不是预想的结果，还需要再研究一下。总之，自己解决不了的难题的最终处理方法是经验，自己解决的难题的处理方法也是经验，以后这两种我都会记录。
12/7
今天遇到问题，本地打包没问题，线上打包就会有个组件报错，说找不到，后来小老哥帮我看了下，发现git上传到线上仓库自动把该文件夹改为小写的了，因为git忽略了大小写。
编辑器中如果需要git不能忽略大小写，需要配置
git config core.ignorecase false
12/11
今天是周天，补一下周五的。如果组件mount的时候表格里的内容是动态从后端获取后展示的，要在useMount里直接使用useState设置表格里的值，对于值的获取和逻辑计算处理，在useMount外面处理，其内部只是useState赋值，如果值的逻辑计算也在useMount内部处理，那么表格拿到的值就只是初始值