最近深陷困扰,因为赶项目的原因(赶只是其中一小部分原因),导致现在想重构,发现特别困难。代码就跟狗屎一样,不想碰它,目前这个项目基本由我自己维护。项目是由electron+react写的,因为两项加起来学了三四天就动手,所以 在 这【项目赶】+【学习周期短】+【本人菜】等客观因素前提下,我一个类居然有两千行代码。姑且叫它类吧。。哈哈哈。
本人是半路转前端的,可能比一般的前端要水。这一水就水出问题来了。现在讲讲我遇到的一些问题。
1、由于JS是基于对象的语言,所以根据不同的人,写出来的代码,就像是面向过程和面向对象的。因为长期没有面向对象的这么一个思维,所以在使用 react的es6写法(类组件)的时候,组件本身是作为一个类,但是其他的数据模型等。我却没有把它再细分。导致所有的代码都堆积在组件里面。尽管我尝试尽可能地抽出一些组件。但很显然。抽出来的组件,只是稍微改善了一点 一个类里面的代码量而已。并不能从根本上解决问题。
2、面向对象的思维难以转换,尝试去设计构造一个类的时候,有点困难。所以我接下来会重拾TypeScript,以锻炼我的面向对象思维。
3、初学者对于性能不够敏感。在一般的需求下。普通的写法足够满足,所以就会忽视这些问题,导致做了一些不必要的计算。
比如以下代码
enter = event => {
if (event.keyCode == 13 && !this.state.disabled) {
this.login();
} else if (event.keyCode == 13) {
message.info('请填写账号密码');
}
}
上面的函数是判断一个input是否按了enter键盘,如果按了enter并且满足另一个条件,则执行login。上面的代码看上去是没有什么太大的问题的。但是你会发现,如果按键不是enter,这个函数还是会继续判断,并且是判断两个分支,即if 和 else if。所以我们应该优先考虑不满足的条件并提前return,特别是if else特别多分支的时候,我们更需要这样处理,如下
enter = event => {
//如果不是enter键,直接return
if(event.keyCode!=13)
return;
if (event.keyCode == 13 && !this.state.disabled) {
this.login();
} else if (event.keyCode == 13) {
message.info('请填写账号密码');
}
}
还有一些react本身的渲染问题
setState会导致组件重新渲染,这种情况下,我们要避免多次渲染,甚至避免不必要的渲染。
比如一个场景:账号和密码在更改的时候,我们判断是否让登录按钮可点击。
我们可以写成
//伪代码
this.setState({userName:'xxx'},()=>{
//if else
this.setState({buttonState:true/false})
})
这样的话,上面就调用了两次setState,组件重新渲染了两次,其实我们可以在第一步setState的时候就判断,按钮状态是否更新,而不是依赖于第一个setState之后的状态再做一次setState,这样react只需要计算一次即可同时更新数据而不用分两次计算。
同样,当所有的状态和属性都没有变化的时候,我们可以通过shouldComponentUpdate来控制是否应该重新render,即使调用了setState,如果shouldComponentUpdate返回false就不会触发render 函数