某一線前端小組長(zhǎng)的 Code Review 分享
共 2977字,需瀏覽 6分鐘
·
2024-07-31 09:15
點(diǎn)擊上方 前端Q,關(guān)注公眾號(hào)
回復(fù)加群,加入前端Q技術(shù)交流群
?? 前言
大家平時(shí)網(wǎng)上搜索能搜出一堆Code Review 實(shí)踐、Code Review 流程、如何如何 Code Review 等等。好像實(shí)際的 review 記錄并不多,恰好本人有幸擔(dān)任前端小組長(zhǎng)一職,平時(shí)摸魚(yú)就去偷偷看看大家又寫(xiě)了什么優(yōu)秀代碼。所以今天就由小弟我,給大家分享一下,小廠一線前端平時(shí)寫(xiě)的代碼??
作者能力有限,里面的評(píng)論不一定十分正確,僅做記錄,拋磚引玉,以供學(xué)習(xí)參考~
項(xiàng)目背景:
react 16.8+ antd@4
?? Talk is cheap. Show me the code!
location.replace 和 location.href的使用區(qū)別
正則判斷沒(méi)有對(duì)用戶可能輸入的特殊符號(hào)進(jìn)行轉(zhuǎn)義
解析:
該組件本意是想實(shí)現(xiàn)對(duì)一串字符中的關(guān)鍵字進(jìn)行高亮展示;
而正則表達(dá)式中有些字符具有特殊的含義,如果在匹配中要用到它本來(lái)的含義,需要進(jìn)行轉(zhuǎn)義(在其前面加一個(gè)\)。如:* . ? + $ ^ [ ] ( ) { } | \ /
Table行點(diǎn)擊事件的處理
這里示例代碼想實(shí)現(xiàn)點(diǎn)擊表格行跳轉(zhuǎn)頁(yè)面效果,但是會(huì)導(dǎo)致一些鼠標(biāo)操作被覆蓋
在一個(gè)較大的組件內(nèi),需要注意輸入組件導(dǎo)致的重渲染問(wèn)題
避免使用反直覺(jué)的編碼
做好路由字符串拼接的缺省處理
沒(méi)有還原本地測(cè)試代碼
解析:
一些本地運(yùn)行時(shí)的mock代碼,發(fā)到線上時(shí)忘記還原代碼
維護(hù)好項(xiàng)目?jī)?nèi)的公共組件
使用原生 js 獲取 dom 節(jié)點(diǎn),沒(méi)有使用一個(gè)變量來(lái)維護(hù) id 值
方便后續(xù)維護(hù)
思維固化
這位同學(xué)可能忘記format函數(shù)的入?yún)⑹强梢愿牡牧??
邏輯不夠抽象
簡(jiǎn)單問(wèn)題復(fù)雜化,這一堆
&&是不是看的頭大。。
文件名與實(shí)際內(nèi)容不符
命名不規(guī)范
又是小駝峰又是全大寫(xiě)、又是大寫(xiě)下橫線。。
state 的粒度太細(xì)
避免一個(gè)組件里面有n多行的
useState
避免直接修改對(duì)象值,React 要求數(shù)據(jù)不可變
官網(wǎng)解釋:zh-hans.reactjs.org/tutorial/tu…[1]
不熟悉 Antd 組件的 api
這里想修改Popover組件內(nèi)部的樣式,想當(dāng)然的就在外面套多一層div了
ant-design popover api: overlayClassName[2]
Table 的滾動(dòng)高度沒(méi)有自適應(yīng)
如果用戶的顯示器大小不一,列表可能展示不全或者只占了一小部分的面積
修改為:scroll={{ y: 'calc(100vh - 表頭與頂部距離px)' }}
?? 寫(xiě)在最后
本篇文章整體內(nèi)容稍微零散,對(duì)于沒(méi)有基礎(chǔ)的同學(xué)可能不太友好,不過(guò)如果大家看完覺(jué)得有所收獲,可以留言點(diǎn)贊!后續(xù)我會(huì)繼續(xù)抽空記錄,爭(zhēng)取出一系列文章~
往期推薦
最后
歡迎加我微信,拉你進(jìn)技術(shù)群,長(zhǎng)期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端,做個(gè)專業(yè)的技術(shù)人...
