感谢 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，引发无限循环。