V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
nanxiaobei
V2EX  ›  React

⚛️ React 开发最佳实践

  •  
  •   nanxiaobei ·
    nanxiaobei · 2022-07-26 23:00:17 +08:00 · 8644 次点击
    这是一个创建于 667 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    1. 多层 props 传递,保持命名一致
      onChangeonChangeonChange
      onChangehandleChangechange

    2. 若对函数包装后传递,保持命名不一致
      onChangeonTextChange = () => { onChange() }onTextChange
      onChangeonChange = () => { 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. 理清文件、文件夹设置逻辑,尽量减少数目,思考是否有必要新增

    82 条回复    2022-08-08 08:45:43 +08:00
    Mark24
        1
    Mark24  
       2022-07-26 23:01:18 +08:00
    不用 Hooks ✅
    Bijiabo
        2
    Bijiabo  
       2022-07-26 23:05:08 +08:00
    赞,有心
    Aloento
        3
    Aloento  
       2022-07-26 23:38:46 +08:00
    不用 Hooks ✅
    adjusted
        4
    adjusted  
       2022-07-26 23:44:47 +08:00   ❤️ 9
    ``` javascript
    onChange={handleChange}
    onTextChange={handleTextChange}
    ```
    beginor
        5
    beginor  
       2022-07-26 23:51:43 +08:00 via Android
    ShopList ShopDetail ❌
    shop-list ShopDetail ✅
    ylual
        6
    ylual  
       2022-07-27 00:02:14 +08:00 via iPhone   ❤️ 3
    @Aloento 用 Hooks 怎么了呢
    Bijiabo
        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) {…} ✅

    ```
    JounQin
        8
    JounQin  
       2022-07-27 00:19:23 +08:00 via iPhone   ❤️ 1
    All in hooks.
    HFX3389
        9
    HFX3389  
       2022-07-27 01:40:16 +08:00
    @Mark24 #1
    @Aloento #3
    公司强制要求 Hooks+函数式开发
    iseki
        10
    iseki  
       2022-07-27 01:45:35 +08:00 via Android   ❤️ 16
    不用 class 组件 ✅
    Aloento
        11
    Aloento  
       2022-07-27 01:55:35 +08:00
    @ylual 我只是一个复读机
    Leviathann
        12
    Leviathann  
       2022-07-27 01:58:07 +08:00   ❤️ 3
    官方示例就是方法叫 handle ,参数叫 on
    huijiewei
        13
    huijiewei  
       2022-07-27 07:13:22 +08:00
    不用 class 组件 ✅
    bthulu
        14
    bthulu  
       2022-07-27 08:11:39 +08:00
    4. 保持命名明确, 你这一点都不 js. 多看看 nodejs 组件命名和第三方命名, 能用一个字符命名的, 绝对不要用两个字符. 能用缩写的绝对不要用全称.
    bthulu
        15
    bthulu  
       2022-07-27 08:15:16 +08:00
    8. '' 与 0 在 jsx 中一定要做判断. 你写着一坨又臭又长. js 是干嘛的? 是脚本语言, 是解释型语言, 不是编译型语言. 你写成裹脚布那样又臭又长, 你还用什么 js, 去用 C#, Java 不好么?
    oatw
        16
    oatw  
       2022-07-27 08:23:27 +08:00   ❤️ 1
    不用 React ✅
    sjhhjx0122
        17
    sjhhjx0122  
       2022-07-27 08:27:30 +08:00
    不用 Hooks ✅
    beisilu
        18
    beisilu  
       2022-07-27 08:30:16 +08:00
    不写前端✅
    AyaseEri
        19
    AyaseEri  
       2022-07-27 08:40:17 +08:00
    不搞开发✅
    anakinsky
        20
    anakinsky  
       2022-07-27 08:45:26 +08:00
    不活了✅
    sechi
        21
    sechi  
       2022-07-27 08:48:07 +08:00
    不用电脑✅
    Mark24
        22
    Mark24  
       2022-07-27 08:49:18 +08:00 via Android
    @HFX3389 说明对技术缺乏基本判断。hooks 太容易出问题 😂
    plk403
        23
    plk403  
       2022-07-27 08:54:59 +08:00
    不上 V2✅
    vivipure
        24
    vivipure  
       2022-07-27 09:05:14 +08:00
    all in hooks
    zed1018
        25
    zed1018  
       2022-07-27 09:17:51 +08:00
    不用 axios ✅
    Lyv5
        26
    Lyv5  
       2022-07-27 09:24:12 +08:00
    我们都是菜狗✅
    kangyan
        27
    kangyan  
       2022-07-27 09:28:30 +08:00
    月经贴了属于是
    ryougifujino
        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>
    );
    }
    mxT52CRuqR6o5
        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 ?
    ke2933
        30
    ke2933  
       2022-07-27 09:37:10 +08:00
    @Mark24
    @Aloento
    @sjhhjx0122
    公司要求用 Hooks ,个人贼讨厌
    jason94
        31
    jason94  
       2022-07-27 09:53:45 +08:00
    第 3 条就不对

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

    reactjs 官方示例就是用的 handle ,这样的好处是可以将事件处理函数和其他处理函数区分开。
    christin
        32
    christin  
       2022-07-27 09:57:26 +08:00   ❤️ 1
    不用 class 组件 ✅
    dont27
        33
    dont27  
       2022-07-27 10:01:15 +08:00
    不改需求✅
    churchill
        34
    churchill  
       2022-07-27 10:02:31 +08:00   ❤️ 1
    以我个人浅薄的 react 使用经验来说,hooks 是 react 用起来最舒服的特性之一
    我的焦点可以一直在数据上面,不用考虑什么 Mount, Update 各种东西,就好比手指不离开键盘主行
    不理解为什么这么多人不喜欢
    人与人的悲喜确实不尽相同
    guchengzhihuan
        35
    guchengzhihuan  
       2022-07-27 10:04:10 +08:00
    不用 React✅
    NTZONE
        36
    NTZONE  
       2022-07-27 10:06:56 +08:00   ❤️ 1
    最让我疑惑的句式之一就是最...之一,我认为「最」和「之一」是矛盾的。
    dreamerblue
        37
    dreamerblue  
       2022-07-27 10:10:02 +08:00
    不用 Hooks ✅
    不用 React ✅
    yuuko
        38
    yuuko  
       2022-07-27 10:10:29 +08:00
    换 Solidjs
    lmshl
        39
    lmshl  
       2022-07-27 10:14:27 +08:00
    All in hooks ✅
    kongkx
        40
    kongkx  
       2022-07-27 10:16:44 +08:00 via iPhone
    保持一致性就好了,注意命名规范,没那么多条条框框
    Oktfolio
        41
    Oktfolio  
       2022-07-27 10:17:32 +08:00   ❤️ 1
    换 Angular✅
    qiumaoyuan
        42
    qiumaoyuan  
       2022-07-27 10:26:35 +08:00
    其实你们所谓的“屎山”跟这些所谓的规范关系不大。屎的主要来源是重复代码,完。
    avv
        43
    avv  
       2022-07-27 10:33:28 +08:00
    竟然没人提 VUE✅
    duanxianze
        44
    duanxianze  
       2022-07-27 10:35:38 +08:00
    不做前端了✅
    lankunblue
        45
    lankunblue  
       2022-07-27 10:38:21 +08:00
    @bthulu 比如说?
    CodingNaux
        46
    CodingNaux  
       2022-07-27 10:39:09 +08:00
    比起这些,代码的可读性更重要吧
    sjhhjx0122
        47
    sjhhjx0122  
       2022-07-27 10:59:31 +08:00
    @churchill 不够直观,每个人你不知道他的水平,接手别人的代码,每个 hook 都要点进去从头到尾看一遍,hook 看似很美好,但是纯函数的组件我写起来就觉得奇怪,好像有洁癖一样的组件和 hook 要纯洁单一,但是写业务的时候没法纯洁单一,每次为了代码看起来整洁一点,抽了一堆 hook 出来,结果没整洁反而更奇怪了,不过也可能是我 angular 写习惯了
    TWorldIsNButThis
        48
    TWorldIsNButThis  
       2022-07-27 11:16:44 +08:00 via iPhone
    @sjhhjx0122 写成 service 不是也要看一遍?这个区别在哪
    sjhhjx0122
        49
    sjhhjx0122  
       2022-07-27 11:27:14 +08:00
    @TWorldIsNButThis 没什么区别,可能是写 class 更符合我的直觉
    v2pxpx
        50
    v2pxpx  
       2022-07-27 11:41:21 +08:00   ❤️ 1
    不用 React ✅
    v2pxpx
        51
    v2pxpx  
       2022-07-27 11:43:43 +08:00
    @qiumaoyuan 我认为的”屎“,是简洁。你可以通过一种更加简洁的代码实现相同的功能,不仅仅是代码量
    nzbin
        52
    nzbin  
       2022-07-27 12:53:44 +08:00
    《 Angular 代码风格指南》自取
    https://angular.cn/guide/styleguide
    mingdongshensen
        53
    mingdongshensen  
       2022-07-27 12:54:25 +08:00
    作为初学者,觉得 hook 挺不错的,第三方库的 hook 都设计的挺好用起来也方便,自定义 hook 写不太多,大家不想用 hook 可能是因为自定义 hook 设计难度?
    mingdongshensen
        54
    mingdongshensen  
       2022-07-27 12:56:14 +08:00
    不用 class ✅
    zxCoder
        55
    zxCoder  
       2022-07-27 13:04:55 +08:00
    不用 jsx✅
    hzjseasea
        56
    hzjseasea  
       2022-07-27 13:47:21 +08:00
    最近正在学习 react ,很好奇为啥不用 hooks.....
    bzw875
        57
    bzw875  
       2022-07-27 13:54:43 +08:00
    用不用 Hooks 听老板的,我都行
    linzhipeng
        58
    linzhipeng  
       2022-07-27 14:23:01 +08:00
    不用 react✅
    w6a
        59
    w6a  
       2022-07-27 14:28:00 +08:00
    用 JQuery ✅
    vampuke
        60
    vampuke  
       2022-07-27 15:02:38 +08:00
    想问问第 8 条
    vampuke
        61
    vampuke  
       2022-07-27 15:03:01 +08:00
    @vampuke
    '' 与 0 在 jsx 中一定要做判断
    val !== '' && 123 val !== 0 && 123 ✅
    val && 123 ❌


    必要性是什么
    xingguang
        62
    xingguang  
       2022-07-27 15:28:24 +08:00
    @NTZONE #36 one of the best xxx 英语的经典句式了
    ada87
        63
    ada87  
       2022-07-27 15:49:47 +08:00
    (严肃)我有一个真问题,在此处问求解惑:

    为什么看到所有地方都是 return (<div></div>) 这样的?
    直接 return <div></div> 不好吗,不好的话,具体是什么原因?
    MonkeyD1
        64
    MonkeyD1  
       2022-07-27 15:57:17 +08:00
    @ada87 你 div 里面代码够多的时候肯定要换行的, 总不能
    ```js
    return
    <div></div>
    ```
    这种情况会变成 return 的是 undefined
    g0thic
        65
    g0thic  
       2022-07-27 16:01:30 +08:00
    第一个就不同意了 事件用 handle 参数用 on
    bthulu
        66
    bthulu  
       2022-07-27 16:04:36 +08:00
    @lankunblue 比如说 nodejs 里的 fs, 为啥用 fs, 而不用 fileSystem 呢? 比如说 lodash, 为啥用_, 而不用全名 lodash 呢? 比如 jquery 为啥都用$不用 jQuery?
    js 作为脚本语言, 代码简短写起来快是第一位的, 任何其他考量都要为此让路.
    xingyuc
        67
    xingyuc  
       2022-07-27 16:05:39 +08:00
    大多数都是命名问题,如果你要求不了团队,那就忍着,这和 react 有什么关系
    gkinxin
        68
    gkinxin  
       2022-07-27 16:31:30 +08:00
    @vampuke #61 举个例子 如果是 0(xxx.length)&&<div>xxx</div> 括号里为常见出现 0 的情况,那这时候界面上就会显示 0 , 但通常我们希望是不显示,因此需要让第一个值的结果为 boolean 类型。
    vampuke
        69
    vampuke  
       2022-07-27 16:53:56 +08:00
    @gkinxin #68 请问那用!!xxx&&<div>xxx</div> 是不是更好
    enchilada2020
        70
    enchilada2020  
       2022-07-27 17:23:33 +08:00 via Android
    @qiumaoyuan 不应该是人菜吗
    wjx0912
        71
    wjx0912  
       2022-07-27 17:38:55 +08:00
    gkinxin
        72
    gkinxin  
       2022-07-27 18:37:11 +08:00
    @vampuke #69 取反可读性没么高
    zhwithsweet
        73
    zhwithsweet  
       2022-07-27 19:25:34 +08:00
    不打工了✅
    ldyisbest
        74
    ldyisbest  
       2022-07-27 20:57:22 +08:00
    React ✅
    Vue ❌
    uni
        75
    uni  
       2022-07-27 23:49:49 +08:00
    这些点提得都挺好的,很多我自己也没注意
    不过屎山主要还是代码结构的问题吧,跟命名关系没有这么大吧
    用 hooks 其实超容易出屎山的,其实我一直在期待 hooks 的最佳实践手册
    daokedao
        76
    daokedao  
       2022-07-28 08:02:18 +08:00   ❤️ 1
    checkbox 应该放在前面
    ✅ 不上 V2
    ❌ 不用电脑
    ccyu220
        77
    ccyu220  
       2022-07-28 08:03:01 +08:00
    这个 React 有个鸡儿的关系

    React 开发最佳实践 ❌
    JS 命名规范 ✅
    SHOOT
        78
    SHOOT  
       2022-07-28 15:51:03 +08:00
    这可是稳定就业的关键啊,弄得明明白白,清清楚楚,老板找个应届生两天就上手然后让我滚蛋咋办✅
    woqujjfly
        79
    woqujjfly  
       2022-07-28 16:37:52 +08:00
    ✅ 重新投胎投个好人家
    rodrick
        80
    rodrick  
       2022-07-28 19:34:13 +08:00
    这几个点都是能用于 react 但是不完全针对与 react 还有就是大家真的啥都能吵啊真的..
    charlie21
        81
    charlie21  
       2022-07-29 12:10:57 +08:00
    naming conventions 是 coding conventions 的重要组成部分
    ragnaroks
        82
    ragnaroks  
       2022-08-08 08:45:43 +08:00
    @ada87 应该是以前的习惯,现在更多是 return <div>abc</div> 或 return <><div>abc</div><span>efg</span</>
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1894 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 16:27 · PVG 00:27 · LAX 09:27 · JFK 12:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.