最近深陷困擾，因為趕專案的原因（趕只是其中一小部分原因），導致現在想重構，發現特別困難。程式碼就跟狗屎一樣，不想碰它，目前這個專案基本由我自己維護。專案是由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 函式