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

[Mark24]

不用 Hooks ✅

[Bijiabo]

赞，有心

[Aloento]

不用 Hooks ✅

[adjusted]

``` javascript
onChange={handleChange}
onTextChange={handleTextChange}
```

[beginor]

ShopList ShopDetail ❌
shop-list ShopDetail ✅

[ylual]

@Aloento 用 Hooks 怎么了呢

[Bijiabo]

延伸一下第 8 条，尽可能让判断条件意义明确：

```js
if (val !== '' && val !== 0 && val === ‘xxx’) {...} ❌
var isXXXScenario = val !== '' && val !== 0 && val === ‘aaaa’; if (isXXXScenario) {…} ✅

```

[JounQin]

All in hooks.

[HFX3389]

@Mark24 #1
@Aloento #3
公司强制要求 Hooks+函数式开发

[iseki]

不用 class 组件 ✅

[Aloento]

@ylual 我只是一个复读机

[Leviathann]

官方示例就是方法叫 handle ，参数叫 on

[huijiewei]

不用 class 组件 ✅

[bthulu]

4. 保持命名明确, 你这一点都不 js. 多看看 nodejs 组件命名和第三方命名, 能用一个字符命名的, 绝对不要用两个字符. 能用缩写的绝对不要用全称.

[bthulu]

8. '' 与 0 在 jsx 中一定要做判断. 你写着一坨又臭又长. js 是干嘛的? 是脚本语言, 是解释型语言, 不是编译型语言. 你写成裹脚布那样又臭又长, 你还用什么 js, 去用 C#, Java 不好么?

[oatw]

不用 React ✅

[sjhhjx0122]

不用 Hooks ✅

[beisilu]

不写前端✅

[AyaseEri]

不搞开发✅

[anakinsky]

不活了✅

[sechi]

不用电脑✅

[Mark24]

@HFX3389 说明对技术缺乏基本判断。hooks 太容易出问题 😂

[plk403]

不上 V2✅

[vivipure]

all in hooks

[zed1018]

不用 axios ✅

[Lyv5]

我们都是菜狗✅

[kangyan]

月经贴了属于是

[ryougifujino]

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>
);
}

[mxT52CRuqR6o5]

@Mark24
https://stackoverflow.com/questions/38926574/react-functional-components-vs-classical-components
官方态度也是 encourage ，你不想用当然可以不用，但请不要到处宣传谬论 ok ？

[ke2933]

@Mark24
@Aloento
@sjhhjx0122
公司要求用 Hooks ，个人贼讨厌

[jason94]

第 3 条就不对

https://reactjs.org/docs/handling-events.html

reactjs 官方示例就是用的 handle ，这样的好处是可以将事件处理函数和其他处理函数区分开。

[christin]

不用 class 组件 ✅

[dont27]

不改需求✅

[churchill]

以我个人浅薄的 react 使用经验来说，hooks 是 react 用起来最舒服的特性之一
我的焦点可以一直在数据上面，不用考虑什么 Mount, Update 各种东西，就好比手指不离开键盘主行
不理解为什么这么多人不喜欢
人与人的悲喜确实不尽相同

[guchengzhihuan]

不用 React✅

[NTZONE]

最让我疑惑的句式之一就是最...之一，我认为「最」和「之一」是矛盾的。

[dreamerblue]

不用 Hooks ✅
不用 React ✅

[yuuko]

换 Solidjs

[lmshl]

All in hooks ✅

[kongkx]

保持一致性就好了，注意命名规范，没那么多条条框框

[Oktfolio]

换 Angular✅

[qiumaoyuan]

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

[avv]

竟然没人提 VUE✅

[duanxianze]

不做前端了✅

[lankunblue]

@bthulu 比如说？

[CodingNaux]

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

[sjhhjx0122]

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

[TWorldIsNButThis]

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

[sjhhjx0122]

@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 条

[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> 是不是更好

[enchilada2020]

@qiumaoyuan 不应该是人菜吗

[wjx0912]

赞

[gkinxin]

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

[zhwithsweet]

不打工了✅

[ldyisbest]

React ✅
Vue ❌

[uni]

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

[daokedao]

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

[ccyu220]

这个 React 有个鸡儿的关系

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

[SHOOT]

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

[woqujjfly]

✅ 重新投胎投个好人家

[rodrick]

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

[charlie21]

naming conventions 是 coding conventions 的重要组成部分

[ragnaroks]

@ada87 应该是以前的习惯，现在更多是 return <div>abc</div> 或 return <><div>abc</div><span>efg</span</>