学习前端开发处方

在真正前端开发中遇到的一些问题,特此总结,以便后期加强学习

一.修复窗口不能一开始在左上角问题

问题描述:目标是希望弹框出现时直接在左上角,不遮挡下面的一些东西,修改前存在的问题:窗口会先出现在屏幕中间,然后再移动到左上角,该弹框采用了fluentUI库中的Dialog,弹框出现默认位置就是中间,先前采用的方案,某个依赖项改变时去设置一个定时器,拿到类名对应的document元素,将其位置设置为左上角(0,0),移动到(100, 100)位置

自己犯的错误:开始就自己去实现一个对话框,然后去关联相关逻辑,最后设计出一个相比较之前不会在中间,但是位置固定,子能在左上角显示,当对话框增多时,下面的对话框将无法使用,然后又想自己区实现对话框的可拖动,也可以实现但是比较麻烦,需要自己每次记录坐标,做出来还不知道出现什么别的问题,这个问题一开始的思维方式就出现了错误,

在已知条件:

(1)知道这个对话框是使用的fluentUI的Dialog

(2)其他功能都满足要求只是,窗口会在中间闪烁

(3)需要取消中间闪烁

其实这个问题就在于怎样让对话框加载的时候就直接将其移到左上角而不是先执行默认位置再去移动,而不是直接去自己造轮子,应该将重心放在研究这个库的使用上,最后自己写的弹框也被删掉没有用到,最后还是修改原来库的属性在挂载的时候将它移到左上角

二.添加功能每次直接显示一个控件而不是显示一排

问题描述:业务需要会有很多控件同时出现在页面上,会显得拥挤杂乱,希望每次只显示当前点击对应的控件

自己犯的错误:(1)在循环中使用hook,导致最后自己调试的时候出现奇怪现象,明明看见状态已经修改过来了结果界面上并没有修改,违反了hook使用的规则

hook官方文档:只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。

只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。

 还有一条:

只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中

 错误原因对于hook使用规则不了解,导致错误的出现,解决方案,对于复杂的数组,map之类先获取到map,然后循环修改,最后修改完成之后再设置状态.

(2)写代码时直接将逻辑使用箭头函数写在对应的UI组件的位置,导致有时候自己也找不到,解决方案将对应的代码封装成函数,在ui里面只是调用函数而不是直接写逻辑,最好的方式是将对应操作的逻辑抽象成一个自定义hook,可以使用泛型,最好将某一个功能的逻辑直接抽象成自定义hook,有很多库提供了很多常用的自定义hook,比如:

ahooks

lodash

ramda

希望自己能尽快转变思路,之前C++,习惯面对需求就造轮子,前端具有丰富且成熟的库,希望早日能养成用轮子的习惯.

(3)写完提交之后经常会出现一些错误,错误原因:对redux以及hook调用的数据流了解不够深入,有时候该状态已经被删除了还去修改状态,然后就会报"xxxx不存在"的错误

(4)对整个工程全局状态掌控不够,不能熟练将多个组件的全局状态关联起来,实现联动的效果,

(5)对于UI经验不足不能考虑到用户使用习惯,用户执行某一个操作,软件要怎样响应才不会显得很难用

(6)在函数组件中使用function创建子函数,应该尽量使用useCallback封装函数,并指明它的依赖项,返回一个优化后的函数,依赖项变化后才会被调用,依赖项过多,进行合并,useCallback和useMemo之间的区别

改进:主要从整个工程代码出发,什么东西在什么地方,还有函数组件在什么情况下自动渲染,整个渲染流程,多想想ui业务方面的知识