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

[rookie2luochao]

github 仓库地址为：openapi-ui

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

[rencoo]

@qingshui33 tailwindcss ，避免样式体积不断增大

[rookie2luochao]

@rookie2luochao deps 要修复，这个建议接纳，还没来得及更新上去。文件命名我组件就是 XxxXxx ，文件夹是 xx-xx-xx ，入口、utils 、config 就是 xx ？那我用了很多 useState 要怎么改进才有可读性？

[rookie2luochao]

@rencoo 我感谢你的指出，但是没必要直接就说一坨大便吧，素养？

[rookie2luochao]

@qingshui33 前几年流行 cssinjs, 最近流行 tailwindcss 这些预制 css ，但是 tailwindcss 不写熟练随时对着文档看，而且超难维护，个人感觉

[rookie2luochao]

@qingshui33 尽量不要写行内样式，我是样式确实很少，所以写了点行内样式

[MMM25O7lf09iR4ic]

作为一个非资深后端程序员，我有一个疑问，为啥文件名一会大写一会小写开头？是有什么规范吗？

[rookie2luochao]

@erwsd32ew 文件名大写是前端领域里面组件的概念，组件建议大写命名，其他 utils 这些建议小写

[rencoo]

@rookie2luochao 4 年经验写成这样，还有脸？

[rookie2luochao]

@rencoo 感谢你的建议，我不会在回复你了，感觉你的话语好像充斥着被社会毒打的不满，人其实心态也很重要

[chanChristin]

@rookie2luochao #27
可以把组件都放到 components 文件夹里，方便区分，你这组件和其他文件都写在同一层级里了。
路由写的有点麻烦了，每个文件夹里都有一个 route 文件，可以统一写到一个路由文件里，方便查找维护。

[rookie2luochao]

@rencoo 我刚刚已经修复了大部分 eslint 警告，而且你也可以看下我上面发的那个关于 deps 的文章，大佬们对 deps 的见解也不一样

[rencoo]

@erwsd32ew 他就是瞎搞的，还以为自己很优雅，mac 上文件名大小写不敏感，使用大写的话，会导致 bug

[rookie2luochao]

@chanChristin 我是业务组件就和模块一起放的，纯组件放到了 components 里面，不知道你说的可以把组件都放到 components 文件夹里是说的业务组件吗，文件夹里都有一个 route 文件也是个人习惯，vue 里面一直都是一个 route 文件

[yohane3016]

整个项目有 0 个 useCallback 和 1 个 useMemo ，MainLayout 第一个 useEffect 就有问题，整个项目不必要触发的更新数不胜数。文件名大小写连字符无所谓，但是你得统一啊，那么大一个 Section 是看不见吗，还有单复数，要么都单数要么都复数，这种你随便找个规范遵循都行，别只遵循你自己的规范。

[4Et5ShxMIq58n6Lr]

不喜欢 内联样式

[chanChristin]

@chanChristin 文件名看的我好难受啊，有大驼峰小驼峰还有-连接的。
我提个小建议，你所有的组件都用大驼峰的形式来写，src/components 里面的就写文件夹，比如 app-title ，就写个文件夹叫 AppTitle ，里面写 index.jsx ，如果需要修改样式就写 index.css ，引用的时候就直接引用 src/components/AppTitle 就可以了。

```
useEffect(() => {
valueRef.current = v;
});
```
这个代码有问题，没有依赖，还有 readme 里面的
```
const SetUpOpenApiUI = () => {
useEffect(() => {
import("openapi-ui-dist")
}, []);
```
import 不需要用 useEffect

[chanChristin]

@rookie2luochao #33
业务组件和模块放一起没毛病，那也可以在业务组件旁边新建一个 components 文件夹，把组件都放进去。
每个文件夹里都有 route 不觉得很繁琐吗？新建一个组件就需要写一个路由文件，整合在一起方便查方便写。

[otakustay]

没看出什么特征，几乎没有抽象的感觉，一堆可以往外提的函数写在组件里面，代码大概率过不了 react-hooks 的 lint 规则。比较像 4 个月经验的人的代码

[XCFOX]

整个项目没有任何性能优化，根组件的 update 将导致整个页面的 update 。没有 memo 。只有两个 useMemo ，其中一个 useMemo 根本没必要，应该直接提升出组件外作为常量。

[qfdk]

看了下... 感觉就是个玩的项目. 可复用组件放在 components 里面并且需要大写开头. 没必要 每个都建立一个文件夹放一个 index.... 这个都不方便代码查找. 比如里面的 curl 是个什么鬼？ 第一眼就没看明白. 另外页面最好建一个文件夹叫做 pages 扔里面.....
非专业前端， 但是看了代码以及项目结构 跟我校大一新生差不多....
建义找下最佳实践看看