屎一样的代码，我应该如何进步？

最近深陷困扰，因为赶项目的原因（赶只是其中一小部分原因），导致现在想重构，发现特别困难。代码就跟狗屎一样，不想碰它，目前这个项目基本由我自己维护。项目是由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 函数

屎一样的代码，我应该如何进步？

猜你喜欢