感谢 eslint 让我代码更好看昨天我接到要优化同事写的一个页面的响应速度的需求，于是我开始看他的代码... 看别人的

昨天我接到要优化同事写的一个页面的响应速度的需求，于是我开始看他的代码...

看别人的代码真是件痛苦的事情！他的代码风格和我的截然不同，幸好我 vscode 开了eslint，帮我检测出很多不规范的代码。

所以我想写篇文章记录一下 eslint 帮我抠出的这些不规范。

不要在装饰器和类之间使用 export 关键字。

// 修改方案
@Form.create()      // 这个就是那个装饰器
class Trade extends PureComponent {
    ...
}
export default Trade

constructor 函数写在变量 columns 后面，函数位置应该位于 componentDidMount

即位置顺序应该是：

变量（这里的 columns） → constructor → 生命周期函数（componentWillMount/componentDidMount/... 最好按照生命周期顺序来写）→ 业务函数

成员之间留有空行，让代码更美观

// 修改方案
componentDidMount(){
    ...
}

handleRefund = record=>{
    ...
}

利用结构赋值来简化代码

// 修改方案
const {dispatch} = this.props
dispatch({
    ...
})

数组的 push 操作不算改变变量，使用 const 来定义变量

由于使用了 antd 的 message 组件，所以如图所示，提示上层作用域已经存在 'message'
```
// 修改方案
const msg = [];
res.body.map(item => {
    return msg.push(
      ...
    );
});
```

字符串的拼接使用``，使代码更加直观

// 修改方案
values.remark ? `:${values.remark}` : ''

const msg = [];
  res.body.map(item => {
    return msg.push(
      `单号：${item.value}付款失败！失败原因：${item.msg}。`,
    );
});

不用 index 的值作为 key 的值，应该使用 id 或其他唯一标识字段
原因：React 根据 key 来快速判断是否需要更新 DOM 结构，所以使用 key 属性可以提高性能，并且 key 的值必须是唯一不变的。index 作为数组元素的序列号会跟根据数组的长度改变而改变的，所以不建议使用 index 的值作为 key 值。
单行注释 // 后面应该跟上一个空格，让代码更美观
不在 componentWillUpdate 中使用 setState
原因：当组件收到新的 props 或 state 时，会在渲染之前调用此方法。如果在此方法中使用 setState 则会触发另一个 componentWillUpdate，引起无限循环。