⚛️ React 开发最佳实践

⚛️ React 开发最佳实践 - V2EX
2022-7-27 20:58:12 Author: v2ex.com(查看原文) 阅读量:56 收藏

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

多层 props 传递，保持命名一致
onChange → onChange → onChange ✅
onChange → handleChange → change ❌
若对函数包装后传递，保持命名不一致
onChange → onTextChange = () => { onChange() } → onTextChange ✅
onChange → onChange = () => { props.onChange() } → onChange ❌
保持命名简洁
onChange ✅
handleChange ❌
保持命名明确
onChange paginationTotal ✅
change pagiTotal ❌
传递不同组件的 props ，保持前缀区分
tableColumns tableLoading btnType btnText ✅
columns loading type text ❌
将 props 按照一定的规则排序，例如 UI 中出现顺序、或变量类型、或重要程度等
保持文件与目录的命名，单复数符合常规
common config components utils ✅
commons configs component util ❌
'' 与 0 在 jsx 中一定要做判断
val !== '' && 123 val !== 0 && 123 ✅
val && 123 ❌
保持文件、文件夹大小写一致
ShopList ShopDetail ✅
shop-list ShopDetail ❌
保持文件夹命名与 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 ❌
理清文件、文件夹设置逻辑，尽量减少数目，思考是否有必要新增

Mark24 21 小时 54 分钟前

不用 Hooks ✅

Aloento 21 小时 17 分钟前

不用 Hooks ✅

adjusted 21 小时 11 分钟前

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

beginor 21 小时 4 分钟前 via Android

ShopList ShopDetail ❌
shop-list ShopDetail ✅

ylual 20 小时 53 分钟前 via iPhone

Bijiabo 20 小时 38 分钟前

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

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

```

JounQin 20 小时 36 分钟前 via iPhone

All in hooks.

iseki 19 小时 10 分钟前 via Android

不用 class 组件 ✅

Leviathann 18 小时 57 分钟前

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

bthulu 12 小时 44 分钟前

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

bthulu 12 小时 40 分钟前

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

oatw 12 小时 32 分钟前

不用 React ✅

sechi 12 小时 7 分钟前

不用电脑✅

Mark24 12 小时 6 分钟前 via Android

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

plk403 12 小时 0 分钟前

不上 V2✅

vivipure 11 小时 50 分钟前

all in hooks

zed1018 11 小时 38 分钟前

不用 axios ✅

Lyv5 11 小时 31 分钟前

我们都是菜狗✅

kangyan 11 小时 27 分钟前

月经贴了属于是

ryougifujino 11 小时 27 分钟前

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

christin 10 小时 58 分钟前

不用 class 组件 ✅

dont27 10 小时 54 分钟前

不改需求✅

churchill 10 小时 53 分钟前

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

NTZONE 10 小时 48 分钟前

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

yuuko 10 小时 45 分钟前

换 Solidjs

lmshl 10 小时 41 分钟前

All in hooks ✅

kongkx 10 小时 39 分钟前 via iPhone

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

Oktfolio 10 小时 38 分钟前

换 Angular✅

qiumaoyuan 10 小时 29 分钟前

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

avv 10 小时 22 分钟前

竟然没人提 VUE✅

sjhhjx0122 9 小时 56 分钟前

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

v2pxpx 9 小时 14 分钟前

不用 React ✅

v2pxpx 9 小时 12 分钟前

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

mingdongshensen 8 小时 1 分钟前

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

zxCoder 7 小时 50 分钟前

不用 jsx✅

hzjseasea 7 小时 8 分钟前

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

bzw875 7 小时 1 分钟前

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

w6a 6 小时 27 分钟前

用 JQuery ✅

vampuke 5 小时 53 分钟前

想问问第 8 条

vampuke 5 小时 52 分钟前

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

必要性是什么

ada87 5 小时 6 分钟前

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

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

MonkeyD1 4 小时 58 分钟前

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

g0thic 4 小时 54 分钟前

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

bthulu 4 小时 51 分钟前

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

xingyuc 4 小时 50 分钟前

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

gkinxin 4 小时 24 分钟前

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

vampuke 4 小时 1 分钟前

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

文章来源: https://v2ex.com/t/868907#reply74
如有侵权请联系:admin#unsafe.sh