⚛️ 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. 理清文件、文件夹设置逻辑，尽量减少数目，思考是否有必要新增

[vampuke]

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


必要性是什么

[xingguang]

@NTZONE #36 one of the best xxx 英语的经典句式了

[ada87]

（严肃）我有一个真问题，在此处问求解惑：

为什么看到所有地方都是 return (<div></div>) 这样的？
直接 return <div></div> 不好吗，不好的话，具体是什么原因？

[MonkeyD1]

@ada87 你 div 里面代码够多的时候肯定要换行的, 总不能
```js
return
<div></div>
```
这种情况会变成 return 的是 undefined

[g0thic]

第一个就不同意了 事件用 handle 参数用 on

[bthulu]

@lankunblue 比如说 nodejs 里的 fs, 为啥用 fs, 而不用 fileSystem 呢? 比如说 lodash, 为啥用_, 而不用全名 lodash 呢? 比如 jquery 为啥都用$不用 jQuery?
js 作为脚本语言, 代码简短写起来快是第一位的, 任何其他考量都要为此让路.

[xingyuc]

大多数都是命名问题，如果你要求不了团队，那就忍着，这和 react 有什么关系

[gkinxin]

@vampuke #61 举个例子 如果是 0(xxx.length)&&<div>xxx</div> 括号里为常见出现 0 的情况，那这时候界面上就会显示 0 ， 但通常我们希望是不显示,因此需要让第一个值的结果为 boolean 类型。

[vampuke]

@gkinxin #68 请问那用!!xxx&&<div>xxx</div> 是不是更好

[KMpAn8Obw1QhPoEP]

@qiumaoyuan 不应该是人菜吗

[wjx0912]

赞

[gkinxin]

@vampuke #69 取反可读性没么高

[zhwithsweet]

不打工了✅

[ldyisbest]

React ✅
Vue ❌

[uni]

这些点提得都挺好的，很多我自己也没注意
不过屎山主要还是代码结构的问题吧，跟命名关系没有这么大吧
用 hooks 其实超容易出屎山的，其实我一直在期待 hooks 的最佳实践手册

[daokedao]

checkbox 应该放在前面
✅ 不上 V2
❌ 不用电脑

[ccyu220]

这个 React 有个鸡儿的关系

React 开发最佳实践 ❌
JS 命名规范 ✅

[SHOOT]

这可是稳定就业的关键啊，弄得明明白白，清清楚楚，老板找个应届生两天就上手然后让我滚蛋咋办✅

[woqujjfly]

✅ 重新投胎投个好人家

[rodrick]

这几个点都是能用于 react 但是不完全针对与 react 还有就是大家真的啥都能吵啊真的..