4 年 React 经验 写出这样的业务代码,请问代码质量如何,有什么值得改进的地方吗

24 天前
 rookie2luochao

github 仓库地址为:openapi-ui

求各位大佬 review 代码,并指导一二

6265 次点击
所在节点    程序员
76 条回复
royzxq
24 天前
我捣糨糊以能 run 为目的写的代码都不会是这个样子.. 我指导不了你我的问题
ljpCN
24 天前
@gdtdpt #5 好的方法应该是能放组件里的都放组件里。比如用 react-query 等 hook 的方式发起请求,在组件的函数里展示提示信息。
Ritr
24 天前
@qingshui33 tailwindcss 完美解决你的问题
qingshui33
24 天前
@rencoo #21
@Ritr 好的,我看看去
@rookie2luochao #24 cssinjs 之前也看过一点,可能是写 vue 顺手了,以至于刚开始写 React 这种的,怎么都不太舒服,我再看看 tailwindcss 去,如果实在不行,那也认了 😂
himself65
24 天前
只看 React 部分的话,写法有点过时了。
从整个前端质量看的话,属于是没有什么复杂度的 CRUD project ,里面也没有多少比较深的前端技术
rookie2luochao
24 天前
@yohane3016 这个不是公司项目,所以个人风格比较多,Section 这个得改一下😭🥹
rookie2luochao
24 天前
@chanChristin 这个 useEffect 里面用 import ,是没有办法,必须要动态导入,当然还是设计问题,以前我们项目组没有人文件夹用大写字母开头
rookie2luochao
24 天前
@XCFOX 说中了精髓,这是个小项目,反正不卡,就没有关注性能优化,至于什么 useCallback 配合 react.memo 嫌复杂,没有做,虚心接受,晚点学习一下根组件的 update
neverm0re
24 天前
hooks ,rerender 等感觉还没领悟到位。加油。
himself65
24 天前
> 并指导一二

这里面有很多可以深度挖掘的东西。

如果要深挖 React ,18 、19 出了这么多 API ,简单扫了一下你这里面大多数可以迁移到新的 API 优化一些(比如 useSyncExternalStore 、useTransition……),多读读官网 docs ,很多基本的 pitfall 全在你项目里面出现了一遍( deps 、useEffect……)

状态管理你都没有做,点一下按钮状态都丢了,这些你考虑过吗……

从工程化角度说,你这里面代码风格挺乱的,有时候 style 有时候 css in js ,文件命名……这下下来 eslint 、prettier 你有配吗

从前端角度说,这个项目目前是一个 CSR-only app ,你这个可以有 SSR 你可以尝试,React 出了 RSC 你可以尝试,Streaming UI 你可以做,怎么随便点一下整个屏幕都白了……另外 Vite 有很多自定义的 API 可以自己搭一个 server 玩玩……

随便说几句
janus77
24 天前
就跟楼上说的一样,“你是找人 review ,所以给你指出问题,你不会以为自己代码写的很优雅吧?笑死”
你搁这说你为什么那样做的理由,对我来说有什么意义吗?不是应该记下来赶紧去改吗?你把这个帖子当成辩论贴还是意见收集贴啊
rookie2luochao
24 天前
@himself65 感谢大佬回复解答,项目复杂度确实不高,2 线城市 crud 仔。很多基本的 pitfall 全在你项目里面出现了一遍(这个我去迁移一下)。按钮状态都丢了是指按钮的 loading 吗? eslint 、prettier 都配置了的,写到 package.json 的字段里面。最近我去尝试下 ssr rsc Streaming UI 啥的。屏幕白了可能是因为最近 1-2 天我在过 eslint --fix ,过的不仔细,晚上回去全部改进一下命名等等风格,然后把错误调试好
rookie2luochao
24 天前
@janus77 已经改了,我这个说话属于情商不高,说话风格是啥子都要吧啦一下,也可以改进一下
hahawode
24 天前
bojackhorseman
24 天前
看了下,感觉跟我的风格还是有不少偏差的。
不过老实说就算一个人写也很难保持一致的风格,比如我过段时间就闲的改另一种写法🤣
wang4012055
24 天前
给的意见就是,考虑下如何精简代码和代码可读,个人代码随便写就行.但想让人 review 至少自己觉得没有地方可以优化了才应该拿出来吧.
yagamil
24 天前
老哥挺强的了,前后端通杀,里面还有 go
h1104350235
24 天前
review 可以,就像团队 leader 一样也是这样子做,但你 review 别人代码的时候,一上来就讲是一坨?
chanChristin
24 天前
@rookie2luochao #47
那我没话说了,提一个建议说一直都这么写的,提一个建议说没人这么写,那还问啥啊,想咋写咋写吧。
rookie2luochao
24 天前
@chanChristin 你说的建议很中肯,比如多个 routes 、components 我都改了,但是对组件文件夹名字叫 AppTitle 我提出了疑问,你看下[antd-design 命名]( https://github.com/ant-design/ant-design/tree/master/components/auto-complete)?我们也属于交流是吧?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1047570

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX