感謝 eslint 讓我代碼更好看

昨天我接到要優化同事寫的一個頁面的響應速度的需求，因而我開始看他的代碼...

看別人的代碼真是件痛苦的事情！他的代碼風格和個人大相徑庭，幸虧我 vscode 開了eslint，幫我檢測出不少不規範的代碼。

因此我想寫篇文章記錄一下 eslint 幫我摳出的這些不規範。

1. 不要在裝飾器和類之間使用 export 關鍵字。

   

   // 修改方案
   @Form.create()      // 這個就是那個裝飾器
   class Trade extends PureComponent {
       ...
   }
   export default Trade
   複製代碼

2. constructor 函數寫在變量 columns 後面，函數位置應該位於 componentDidMount

   

   

   即位置順序應該是：

   變量（這裏的 columns） → constructor → 生命週期函數（componentWillMount/componentDidMount/... 最好按照生命週期順序來寫）→ 業務函數

3. 成員之間留有空行，讓代碼更美觀

   

   // 修改方案
   componentDidMount(){
       ...
   }
   
   handleRefund = record=>{
       ...
   }
   複製代碼

4. 利用結構賦值來簡化代碼

   

   // 修改方案
   const {dispatch} = this.props
   dispatch({
       ...
   })
   複製代碼

5. 數組的 push 操做不算改變變量，使用 const 來定義變量

   因爲使用了 antd 的 message 組件，因此如圖所示，提示上層做用域已經存在 'message'

   

   // 修改方案
   const msg = [];
   res.body.map(item => {
       return msg.push(
         ...
       );
   });
   複製代碼

6. 字符串的拼接使用``，使代碼更加直觀

   

   

   // 修改方案
   values.remark ? `:${values.remark}` : ''
   
   const msg = [];
     res.body.map(item => {
       return msg.push(
         `單號：${item.value}付款失敗！失敗緣由：${item.msg}。`,
       );
   });
   複製代碼

7. 不用 index 的值做爲 key 的值，應該使用 id 或其餘惟一標識字段

   

   緣由：React 根據 key 來快速判斷是否須要更新 DOM 結構，因此使用 key 屬性能夠提升性能，而且 key 的值必須是惟一不變的。index 做爲數組元素的序列號會跟根據數組的長度改變而改變的，因此不建議使用 index 的值做爲 key 值。

8. 單行註釋 // 後面應該跟上一個空格，讓代碼更美觀

   

9. 不在 componentWillUpdate 中使用 setState

   

   緣由：當組件收到新的 props 或 state 時，會在渲染以前調用此方法。若是在此方法中使用 setState 則會觸發另外一個 componentWillUpdate，引發無限循環。