一線前端組長的 Code Review 分享

大家好，我是魚皮。今天分享某位一線前端組長 Code Review 的真實經(jīng)歷，希望對大家有幫助。

本文來源：https://juejin.cn/post/7052570403029385253

作者：悄悄哥

項目背景:

• react 16.8+

• antd@4

?? Talk is cheap. Show me the code！

location.replace 和 location.href的使用區(qū)別

正則判斷沒有對用戶可能輸入的特殊符號進行轉(zhuǎn)義

解析：
該組件本意是想實現(xiàn)對一串字符中的關(guān)鍵字進行高亮展示；
而正則表達式中有些字符具有特殊的含義，如果在匹配中要用到它本來的含義，需要進行轉(zhuǎn)義（在其前面加一個\）。如：* . ? + $ ^ [ ] ( ) { } | \ /

Table行點擊事件的處理

這里示例代碼想實現(xiàn)點擊表格行跳轉(zhuǎn)頁面效果，但是會導致一些鼠標操作被覆蓋

在一個較大的組件內(nèi)，需要注意輸入組件導致的重渲染問題

避免使用反直覺的編碼

做好路由字符串拼接的缺省處理

沒有還原本地測試代碼

解析：
一些本地運行時的mock代碼，發(fā)到線上時忘記還原代碼

維護好項目內(nèi)的公共組件

使用原生 js 獲取 dom 節(jié)點，沒有使用一個變量來維護 id 值

方便后續(xù)維護

思維固化

這位同學可能忘記format函數(shù)的入?yún)⑹强梢愿牡牧??

邏輯不夠抽象

簡單問題復雜化，這一堆 && 是不是看的頭大。。

文件名與實際內(nèi)容不符

命名不規(guī)范

又是小駝峰又是全大寫、又是大寫下橫線。。

state 的粒度太細

避免一個組件里面有n多行的useState

避免直接修改對象值，React 要求數(shù)據(jù)不可變

官網(wǎng)解釋：zh-hans.reactjs.org/tutorial/tu…

不熟悉 Antd 組件的 api

這里想修改Popover組件內(nèi)部的樣式，想當然的就在外面套多一層section了

ant-design popover api: overlayClassName

Table 的滾動高度沒有自適應(yīng)

如果用戶的顯示器大小不一，列表可能展示不全或者只占了一小部分的面積
修改為：scroll={{ y: 'calc(100vh - 表頭與頂部距離px)' }}

以上就是本期分享了。

最后,歡迎加入 魚皮的編程知識星球（點擊了解詳情），和 8800 多名小伙伴們一起交流學習，向魚皮和大廠同學 1 對 1 提問、幫你制定學習計劃不迷茫、跟著魚皮直播做項目（往期項目可無限回看）、領(lǐng)取魚皮原創(chuàng)編程學習/求職資料等。