这是一个创建于 885 天前的主题，其中的信息可能已经有所发展或是发生改变。
非常基础非常初级非常幼稚的 React 开发看了想打人的 React 开发最佳实践，但我保证每个大公司都有这样的代码，所有的屎山项目都是这么累计起来的而且大家不以为意。
-
多层 props 传递，保持命名一致
onChange→onChange→onChange✅
onChange→handleChange→change❌ -
若对函数包装后传递，保持命名不一致
onChange→onTextChange = () => { onChange() }→onTextChange✅
onChange→onChange = () => { props.onChange() }→onChange❌ -
保持命名简洁
onChange✅
handleChange❌ -
保持命名明确
onChangepaginationTotal✅
changepagiTotal❌ -
传递不同组件的 props ，保持前缀区分
tableColumnstableLoadingbtnTypebtnText✅
columnsloadingtypetext❌ -
将 props 按照一定的规则排序，例如 UI 中出现顺序、或变量类型、或重要程度等
-
保持文件与目录的命名，单复数符合常规
commonconfigcomponentsutils✅
commonsconfigscomponentutil❌ -
''与0在 jsx 中一定要做判断
val !== '' && 123val !== 0 && 123✅
val && 123❌ -
保持文件、文件夹大小写一致
ShopListShopDetail✅
shop-listShopDetail❌ -
保持文件夹命名与 url 对应
/Shop/List.jsx→/shop✅
/BestShop/List.jsx→/shop❌ -
保持文件夹层级与 url 一致
/Shop/A.jsx→/shop/a、/Shop/B.jsx→/shop/b✅
/Shop/A.jsx→/shop/a、/Shop/Center/B.jsx→/shop/b❌ -
理清文件、文件夹设置逻辑，尽量减少数目，思考是否有必要新增
 |
1
Mark24 2022-07-26 23:01:18 +08:00
不用 Hooks ✅
|
 |
2
Bijiabo 2022-07-26 23:05:08 +08:00
赞，有心
|
 |
3
Aloento 2022-07-26 23:38:46 +08:00
不用 Hooks ✅
|
 |
4
adjusted 2022-07-26 23:44:47 +08:00  9
``` javascript
onChange={handleChange} onTextChange={handleTextChange} ``` |
 |
5
beginor 2022-07-26 23:51:43 +08:00 via Android
ShopList ShopDetail ❌
shop-list ShopDetail ✅ |
|
7
Bijiabo 2022-07-27 00:17:41 +08:00 3
延伸一下第 8 条，尽可能让判断条件意义明确：
```js if (val !== '' && val !== 0 && val === ‘xxx’) {...} ❌ var isXXXScenario = val !== '' && val !== 0 && val === ‘aaaa’; if (isXXXScenario) {…} ✅ ``` |
 |
8
JounQin 2022-07-27 00:19:23 +08:00 via iPhone 1
All in hooks.
|
 |
10
iseki 2022-07-27 01:45:35 +08:00 via Android 16
不用 class 组件 ✅
|
 |
12
Leviathann 2022-07-27 01:58:07 +08:00 3
官方示例就是方法叫 handle ，参数叫 on
|
 |
13
huijiewei 2022-07-27 07:13:22 +08:00
不用 class 组件 ✅
|
 |
14
bthulu 2022-07-27 08:11:39 +08:00
4. 保持命名明确, 你这一点都不 js. 多看看 nodejs 组件命名和第三方命名, 能用一个字符命名的, 绝对不要用两个字符. 能用缩写的绝对不要用全称.
|
|
15
bthulu 2022-07-27 08:15:16 +08:00
8. '' 与 0 在 jsx 中一定要做判断. 你写着一坨又臭又长. js 是干嘛的? 是脚本语言, 是解释型语言, 不是编译型语言. 你写成裹脚布那样又臭又长, 你还用什么 js, 去用 C#, Java 不好么?
|
 |
16
oatw 2022-07-27 08:23:27 +08:00 1
不用 React ✅
|
 |
17
sjhhjx0122 2022-07-27 08:27:30 +08:00
不用 Hooks ✅
|
 |
18
beisilu 2022-07-27 08:30:16 +08:00
不写前端✅
|
 |
19
AyaseEri 2022-07-27 08:40:17 +08:00
不搞开发✅
|
 |
20
anakinsky 2022-07-27 08:45:26 +08:00
不活了✅
|
 |
21
sechi 2022-07-27 08:48:07 +08:00
不用电脑✅
|
 |
23
plk403 2022-07-27 08:54:59 +08:00
不上 V2✅
|
 |
24
vivipure 2022-07-27 09:05:14 +08:00
all in hooks
|
 |
25
zed1018 2022-07-27 09:17:51 +08:00
不用 axios ✅
|
 |
26
Lyv5 2022-07-27 09:24:12 +08:00
我们都是菜狗✅
|
 |
27
kangyan 2022-07-27 09:28:30 +08:00
月经贴了属于是
|
 |
28
ryougifujino 2022-07-27 09:28:37 +08:00 1
on 和 handle 命名本来就是都要用的啊。
https://reactjs.org/docs/handling-events.html 抄自官网： function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You clicked submit.'); } return ( <form onSubmit={handleSubmit}> <button type="submit">Submit</button> </form> ); } |
 |
29
mxT52CRuqR6o5 2022-07-27 09:30:38 +08:00 via Android 6
@Mark24
https://stackoverflow.com/questions/38926574/react-functional-components-vs-classical-components 官方态度也是 encourage ，你不想用当然可以不用，但请不要到处宣传谬论 ok ？ |
 |
30
ke2933 2022-07-27 09:37:10 +08:00
|
 |
31
jason94 2022-07-27 09:53:45 +08:00
第 3 条就不对
https://reactjs.org/docs/handling-events.html reactjs 官方示例就是用的 handle ，这样的好处是可以将事件处理函数和其他处理函数区分开。 |
 |
32
christin 2022-07-27 09:57:26 +08:00 1
不用 class 组件 ✅
|
 |
33
dont27 2022-07-27 10:01:15 +08:00
不改需求✅
|
 |
34
churchill 2022-07-27 10:02:31 +08:00 1
以我个人浅薄的 react 使用经验来说，hooks 是 react 用起来最舒服的特性之一
我的焦点可以一直在数据上面，不用考虑什么 Mount, Update 各种东西，就好比手指不离开键盘主行 不理解为什么这么多人不喜欢 人与人的悲喜确实不尽相同 |
 |
35
guchengzhihuan 2022-07-27 10:04:10 +08:00
不用 React✅
|
 |
36
NTZONE 2022-07-27 10:06:56 +08:00 1
最让我疑惑的句式之一就是最...之一，我认为「最」和「之一」是矛盾的。
|
 |
37
dreamerblue 2022-07-27 10:10:02 +08:00
不用 Hooks ✅
不用 React ✅ |
 |
38
yuuko 2022-07-27 10:10:29 +08:00
换 Solidjs
|
 |
39
lmshl 2022-07-27 10:14:27 +08:00
All in hooks ✅
|
 |
40
kongkx 2022-07-27 10:16:44 +08:00 via iPhone
保持一致性就好了，注意命名规范，没那么多条条框框
|
 |
41
Oktfolio 2022-07-27 10:17:32 +08:00 1
换 Angular✅
|
 |
42
qiumaoyuan 2022-07-27 10:26:35 +08:00
其实你们所谓的“屎山”跟这些所谓的规范关系不大。屎的主要来源是重复代码，完。
|
 |
43
avv 2022-07-27 10:33:28 +08:00
竟然没人提 VUE✅
|
 |
44
duanxianze 2022-07-27 10:35:38 +08:00
不做前端了✅
|
 |
45
lankunblue 2022-07-27 10:38:21 +08:00
@bthulu 比如说？
|
 |
46
CodingNaux 2022-07-27 10:39:09 +08:00
比起这些，代码的可读性更重要吧
|
|
47
sjhhjx0122 2022-07-27 10:59:31 +08:00
@churchill 不够直观，每个人你不知道他的水平，接手别人的代码，每个 hook 都要点进去从头到尾看一遍，hook 看似很美好，但是纯函数的组件我写起来就觉得奇怪，好像有洁癖一样的组件和 hook 要纯洁单一，但是写业务的时候没法纯洁单一，每次为了代码看起来整洁一点，抽了一堆 hook 出来，结果没整洁反而更奇怪了，不过也可能是我 angular 写习惯了
|
 |
48
TWorldIsNButThis 2022-07-27 11:16:44 +08:00 via iPhone
@sjhhjx0122 写成 service 不是也要看一遍？这个区别在哪
|
|
49
sjhhjx0122 2022-07-27 11:27:14 +08:00
@TWorldIsNButThis 没什么区别，可能是写 class 更符合我的直觉
|
 |
50
v2pxpx 2022-07-27 11:41:21 +08:00 1
不用 React ✅
|
|
51
v2pxpx 2022-07-27 11:43:43 +08:00
@qiumaoyuan 我认为的”屎“，是简洁。你可以通过一种更加简洁的代码实现相同的功能，不仅仅是代码量
|
 |
52
nzbin 2022-07-27 12:53:44 +08:00
《 Angular 代码风格指南》自取
https://angular.cn/guide/styleguide |
 |
53
mingdongshensen 2022-07-27 12:54:25 +08:00
作为初学者，觉得 hook 挺不错的，第三方库的 hook 都设计的挺好用起来也方便，自定义 hook 写不太多，大家不想用 hook 可能是因为自定义 hook 设计难度？
|
|
54
mingdongshensen 2022-07-27 12:56:14 +08:00
不用 class ✅
|
 |
55
zxCoder 2022-07-27 13:04:55 +08:00
不用 jsx✅
|
 |
56
fo0o7hU2tr6v6TCe 2022-07-27 13:47:21 +08:00
最近正在学习 react ，很好奇为啥不用 hooks.....
|
 |
57
bzw875 2022-07-27 13:54:43 +08:00
用不用 Hooks 听老板的，我都行
|
 |
58
linzhipeng 2022-07-27 14:23:01 +08:00
不用 react✅
|
 |
59
w6a 2022-07-27 14:28:00 +08:00
用 JQuery ✅
|
 |
60
vampuke 2022-07-27 15:02:38 +08:00
想问问第 8 条
|
|
61
vampuke 2022-07-27 15:03:01 +08:00
|
 |
63
ada87 2022-07-27 15:49:47 +08:00
（严肃）我有一个真问题，在此处问求解惑：
为什么看到所有地方都是 return (<div></div>) 这样的？ 直接 return <div></div> 不好吗，不好的话，具体是什么原因？ |
 |
64
MonkeyD1 2022-07-27 15:57:17 +08:00
|
 |
65
g0thic 2022-07-27 16:01:30 +08:00
第一个就不同意了 事件用 handle 参数用 on
|
|
66
bthulu 2022-07-27 16:04:36 +08:00
@lankunblue 比如说 nodejs 里的 fs, 为啥用 fs, 而不用 fileSystem 呢? 比如说 lodash, 为啥用_, 而不用全名 lodash 呢? 比如 jquery 为啥都用$不用 jQuery?
js 作为脚本语言, 代码简短写起来快是第一位的, 任何其他考量都要为此让路. |
 |
67
xingyuc 2022-07-27 16:05:39 +08:00
大多数都是命名问题，如果你要求不了团队，那就忍着，这和 react 有什么关系
|
 |
68
gkinxin 2022-07-27 16:31:30 +08:00
@vampuke #61 举个例子 如果是 0(xxx.length)&&<div>xxx</div> 括号里为常见出现 0 的情况，那这时候界面上就会显示 0 ， 但通常我们希望是不显示,因此需要让第一个值的结果为 boolean 类型。
|
 |
70
enchilada2020 2022-07-27 17:23:33 +08:00 via Android
@qiumaoyuan 不应该是人菜吗
|
 |
71
wjx0912 2022-07-27 17:38:55 +08:00
赞
|
 |
73
zhwithsweet 2022-07-27 19:25:34 +08:00
不打工了✅
|
 |
74
ldyisbest 2022-07-27 20:57:22 +08:00
React ✅
Vue ❌ |
 |
75
uni 2022-07-27 23:49:49 +08:00
这些点提得都挺好的，很多我自己也没注意
不过屎山主要还是代码结构的问题吧，跟命名关系没有这么大吧 用 hooks 其实超容易出屎山的，其实我一直在期待 hooks 的最佳实践手册 |
 |
76
daokedao 2022-07-28 08:02:18 +08:00 1
checkbox 应该放在前面
✅ 不上 V2 ❌ 不用电脑 |
 |
77
ccyu220 2022-07-28 08:03:01 +08:00
这个 React 有个鸡儿的关系
React 开发最佳实践 ❌ JS 命名规范 ✅ |
 |
78
SHOOT 2022-07-28 15:51:03 +08:00
这可是稳定就业的关键啊，弄得明明白白，清清楚楚，老板找个应届生两天就上手然后让我滚蛋咋办✅
|
 |
79
woqujjfly 2022-07-28 16:37:52 +08:00
✅ 重新投胎投个好人家
|
 |
80
rodrick 2022-07-28 19:34:13 +08:00
这几个点都是能用于 react 但是不完全针对与 react 还有就是大家真的啥都能吵啊真的..
|
 |
81
charlie21 2022-07-29 12:10:57 +08:00
naming conventions 是 coding conventions 的重要组成部分
|
 |
82
ragnaroks 2022-08-08 08:45:43 +08:00
@ada87 应该是以前的习惯，现在更多是 return <div>abc</div> 或 return <><div>abc</div><span>efg</span</>
|
Select Language