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

[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]

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