toC前端组长code-review（一）分享

前言

从一家toB公司跳槽到toC公司真的有蛮多不适应的：

设计扣ui
代码被review(之前都是自己合代码，上生产😸)

本文就由小弟分享一下code review的一些常见问题，关键代码已脱敏

ts类型定义

之前有些不知道的类型就一概用any, 现在是不行滴😄

onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void

正确定义event类型，就能友好的提示event的一些属性和类型

接口触发时机，接口错误影响

写toB项目基本不考虑这种接口触发先后顺序，怎么方便怎么写；通过的case比较少

这里的几个问题是：

badProducts、goodProducts、newProducts没有先后关系
如果getGoodProducts出错了，会导致后面的代码无法执行
接口报错要上报到Sentry，方便分析问题

正确解法：

const goodProducts = getGoodProducts().then(...).catch(e => sentry.report(e))
const badProducts = getBadProducts().then(...).catch(e => sentry.report(e))
const newProducts = getNewProducts().then(...).catch(e => sentry.report(e))

return Promise.all([goodProducts, badProducts, newProducts])

事件移除

组件挂载监听resize事件，但是没有在卸载时候，移除监听

这也是非常容易漏的细节，居然问我需要移除监听吗Hahaha ~ emo了😈

空函数判断

类似这种空值判断，组内统一使用空函数

解法：

const NOOP = () => 8
const { onChange = NOOP } = props
onChange(e)

抽象类逻辑

这里的instance实例，可以单独抽出来作为一个类，而不是都堆在Login里

解法

src/utils/Fruits.ts

class Fruits {
    private instance: null
    constructor() {...}
    async init() {
       this.instance = new Fruits()
    }
    
    clickFruit() {}
    
    destory() {
        this.instance?.destory()
    }
}

export default new Fruits()

src/pages/Login/index.tsx

import fruitsInstance from '../utils/Fruits'

componentDidMount() {
    fruitsInstance.init()
}

componentWillUnMount() {
    fruitsInstance.destory()
}

最后⭐️

本篇文章篇幅不多，主要以一个PR为单位去列举的问题。如果大家有碰到类似问题，也可以对号入座去优化优化，对提升自己也是好处的。

计划会出一个code-review专栏，大家感兴趣可以关注，或者评论告诉我哦⭐️~

感谢👋

想法来源也是看到这一篇文章后，很有启发，就决定分享自己组内code-review的一些问题。