这是一个创建于 1173 天前的主题，其中的信息可能已经有所发展或是发生改变。
非常基础非常初级非常幼稚的 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 linkopeneyes 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 /div> 我们都是菜狗 |
 | 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 linkopeneyes 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 linkopeneyes 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 KMpAn8Obw1QhPoEP 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 这可是稳定就业的关键啊，弄得明明白白，清清楚楚，老板找个应届生两天就上手然后让我滚蛋咋办 |
 | 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