toC前端组长code-review(一)分享

·  阅读 5067

前言

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

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

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

ts类型定义

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

image.png

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

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

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

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

image.png

这里的几个问题是:

  • 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事件,但是没有在卸载时候,移除监听

image.png

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

空函数判断

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

image.png

解法:

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

抽象类逻辑

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

image.png

解法

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的一些问题。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改