⚛️ React 开发最佳实践

[nanxiaobei]

非常基础非常初级非常幼稚的 React 开发看了想打人的 React 开发最佳实践，但我保证每个大公司都有这样的代码，所有的屎山项目都是这么累计起来的而且大家不以为意。

1. 多层 props 传递，保持命名一致
   onChange → onChange → onChange ✅
   onChange → handleChange → change ❌

2. 若对函数包装后传递，保持命名不一致
   onChange → onTextChange = () => { onChange() } → onTextChange ✅
   onChange → onChange = () => { props.onChange() } → onChange ❌

3. 保持命名简洁
   onChange ✅
   handleChange ❌

4. 保持命名明确
   onChange paginationTotal ✅
   change pagiTotal ❌

5. 传递不同组件的 props ，保持前缀区分
   tableColumns tableLoading btnType btnText ✅
   columns loading type text ❌

6. 将 props 按照一定的规则排序，例如 UI 中出现顺序、或变量类型、或重要程度等

7. 保持文件与目录的命名，单复数符合常规
   common config components utils ✅
   commons configs component util ❌

8. '' 与 0 在 jsx 中一定要做判断
   val !== '' && 123 val !== 0 && 123 ✅
   val && 123 ❌

9. 保持文件、文件夹大小写一致
   ShopList ShopDetail ✅
   shop-list ShopDetail ❌

10. 保持文件夹命名与 url 对应
    /Shop/List.jsx → /shop ✅
    /BestShop/List.jsx → /shop ❌

11. 保持文件夹层级与 url 一致
    /Shop/A.jsx → /shop/a、/Shop/B.jsx → /shop/b ✅
    /Shop/A.jsx → /shop/a、/Shop/Center/B.jsx → /shop/b ❌

12. 理清文件、文件夹设置逻辑，尽量减少数目，思考是否有必要新增

[Oktfolio]

换 Angular✅

[qiumaoyuan]

其实你们所谓的“屎山”跟这些所谓的规范关系不大。屎的主要来源是重复代码，完。

[avv]

竟然没人提 VUE✅

[duanxianze]

不做前端了✅

[lankunblue]

@bthulu 比如说？

[CodingNaux]

比起这些，代码的可读性更重要吧

[linkopeneyes]

@churchill 不够直观，每个人你不知道他的水平，接手别人的代码，每个 hook 都要点进去从头到尾看一遍，hook 看似很美好，但是纯函数的组件我写起来就觉得奇怪，好像有洁癖一样的组件和 hook 要纯洁单一，但是写业务的时候没法纯洁单一，每次为了代码看起来整洁一点，抽了一堆 hook 出来，结果没整洁反而更奇怪了，不过也可能是我 angular 写习惯了

[TWorldIsNButThis]

@sjhhjx0122 写成 service 不是也要看一遍？这个区别在哪

[linkopeneyes]

@TWorldIsNButThis 没什么区别，可能是写 class 更符合我的直觉

[v2pxpx]

不用 React ✅

[v2pxpx]

@qiumaoyuan 我认为的”屎“，是简洁。你可以通过一种更加简洁的代码实现相同的功能，不仅仅是代码量

[nzbin]

《 Angular 代码风格指南》自取
https://angular.cn/guide/styleguide

[mingdongshensen]

作为初学者，觉得 hook 挺不错的，第三方库的 hook 都设计的挺好用起来也方便，自定义 hook 写不太多，大家不想用 hook 可能是因为自定义 hook 设计难度？

[mingdongshensen]

不用 class ✅

[zxCoder]

不用 jsx✅

[fo0o7hU2tr6v6TCe]

最近正在学习 react ，很好奇为啥不用 hooks.....

[bzw875]

用不用 Hooks 听老板的，我都行

[linzhipeng]

不用 react✅

[w6a]

用 JQuery ✅

[vampuke]

想问问第 8 条