想不通, React 现代框架的设计者,为什么内置的 onClick 不默认防抖? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
chengguang
V2EX    React

想不通, React 现代框架的设计者,为什么内置的 onClick 不默认防抖?

  •  
  •   chengguang 2 天前 519 次点击

    如题,防抖不是刚需吗?为啥不默认融入到 onClick 中,或者通过入参控制不行吗? 开发中每个都加防抖,麻烦死了!!!!

    40 条回复    2026-01-16 15:52:55 +08:00
    shakaraka
        1
    shakaraka  
    PRO
       2 天前
    summerwar
        2
    summerwar  
       2 天前
    因为原生的 click 就不防抖
    craftsmanship
        3
    craftsmanship  
       2 天前 via Android
    你都用 react 了 不知道找个相关库用一下吗
    shaozelin030405
        4
    shaozelin030405  
       2 天前   2
    ...不是刚需
    wangtian2020
        5
    wangtian2020  
       2 天前
    你觉得组件库不合理可以自己去提 issue 提 pr ,我上个月就提了个 issue 解决一个防抖
    iOCZS
        6
    iOCZS  
       2 天前   2
    没有网络请求需要啥防抖。。。
    zombiej
        7
    zombiej  
       2 天前   1
    做不做的答案其实很简单,就是你进行调整后,开发者是否还能还原原来的功能以及是否有必要。

    比如说 onClick 防抖,那在不防抖的场景里(比如抢票、短时间点击抢积分等等)开发者就需要绕非常大的一圈来实现支持多点击效果。

    那是不是可以加一个属性来支持配置?那就看你的库是否贴近底层,越近越受限制,越远越自由。一个 onClick 防抖需要在 Fiber 节点里存储最近点击数据(我们暂时不提 Fiber 本身是一个抽象节点,本来就不应该关心这件事),那对于大量不处理点击事件的节点都是没有意义的数据,但是因为冒泡以及可以存在动态调整 props 来支持 onClick ,导致框架层必须要预存数据。对于性能与内存都是没有必要的。
    phkvae
        8
    phkvae  
       2 天前   10
    这就是你和框架设计者的区别,你看到的只是你的业务问题,框架解决的是更高层面的问题
    shintendo
        9
    shintendo  
       2 天前
    React 的哲学就是手动挡
    phkvae
        10
    phkvae  
       2 天前   1
    开发中每个加防抖 你应该想的是去封装一个组件 或者写一个 hooks 是来解决 而不是每个都去加
    NerbraskaGuy
        11
    NerbraskaGuy  
       2 天前   1
    每个点击单独加防抖那你也是蛮拼的,封装一个通用防抖函数都比来这发帖吐槽更快
    canteon
        12
    canteon  
       2 天前   4
    在你想要的位置加个看不见的遮罩,还抖什么抖。 看见防抖俩字都想吐,抖了个
    HojiOShi
        13
    HojiOShi  
       2 天前   22
    如果不是为了赚币,我觉得只有会流口水的所谓开发才能问得出这个问题。
    chenliangngng
        14
    chenliangngng  
       2 前
    比如我要做个连点器或者计数器怎么办

    防抖功能完全可以通过引用第三方包或者手动实现,通过高阶函数传参控制
    nszbf
        15
    nszbf  
       2 天前
    =.=,多小白问出这样的问题
    newaccount
        16
    newaccount  
       2 天前   2
    老哥,前端不适合你,去做后端吧
    后端就简单多了
    来~
    这是个 apple~
    这是个 pen~
    PIA!
    banana pie!
    leokun
        17
    leokun  
       2 天前
    @HojiOShi 你说的不是这个吧
    moooooooo
        18
    moooooooo  
       2 天前
    yhxx
        19
    yhxx  
       2 天前   2
    设计模式第一大原则:单一职责
    zhengfan2016
        20
    zhengfan2016  
       2 天前
    vue 都没有这种功能
    molvqingtai
        21
    molvqingtai  
       2 天前
    防抖了
    还要不要双击选中文本?
    还要不要事件冒泡?
    如果不要冒泡导致全局事件埋点失效怎么处理?
    如果需要冒泡怎么既可以让事件冒泡又能实现防抖效果?
    防抖有那么多配置项,防抖延时是前置还是后置?
    既然都有防抖了要不要支持节流?

    你觉得只是加个防抖,在框架作者看来需要处理一堆问题
    MindMindMax
        22
    MindMindMax  
       2 天前
    防抖策略呢? 怎么抽象出相关的参数? 会不会增加使用难度?
    wogogoing
        23
    wogogoing  
    PRO
       2 天前
    框架设计需要考虑普遍的通用性,“防抖”可以说是业务层面的事情。

    如果框架连这些内容都要事无巨细的处理,那么会背上沉重的技术债,而且也会丢失通用性。
    ramcasky
        24
    ramcasky  
       2 天前
    不要只站在自己的角度上去想
    worker201
        25
    worker201  
       2 天前
    声明一下,lz 是个特例,并不是所有前端都这么纯
    frankies
        26
    frankies  
       2 天前
    看来前端娱乐圈真的不是个笑话
    sentinelK
        27
    sentinelK  
       2 天前   1
    很多人只嘲讽,不讲逻辑。我尝试讲讲看。

    首先,从原教旨主义上讲,事件的触发默认逻辑就是多线程的。既触发几次事件,响应的方法就应该执行几次。所以至少不能默认“防抖”。

    其次,“防抖按钮组件”是存在的。只是不是 React 提供的而已。

    然后,“防抖按钮”在目前的互联网逻辑下用的多么?多。因为当今远程访问多了,延时大了,不防抖很容易和用户意愿相悖。

    最后,React 应该给机制来解决么?不应该。因为 React 解决的,是也仅是“前端的职能管理与分工”问题。不解决业务与 UI 问题。

    所以,不是 React 应该包含,而是你应该使用一个带 loading 按钮的 UI 组件库。

    回答完毕。
    tog
        28
    tog  
       2 天前
    新手吧?
    现在老油条了,写个鸡吧的防抖
    sentinelK
       
    sentinelK  
       2 天前
    btw:由此就引申出一个问题。目前多数新的 web 应用都上框架,是因为管理职能的需要。
    使用框架并不是 web 开发的必要条件。

    所以不要啥事儿都往 React 、Vue 、Angular 身上遮。
    66beta
        30
    66beta  
       2 天前
    喜欢大而全是吧,去用阿里的开源框架吧
    suyuyu
        31
    suyuyu  
       2 天前   1
    我建议你买化为
    swulling
        32
    swulling  
       2 天前
    我有个问题,如果涉及到后端执行的按钮,按下后状态变成 disabled 等待后端返回,为什么会抖?
    woodytang
        33
    woodytang  
       2 天前
    为啥要防抖,我就是想要抖怎么办
    Leviathann
        34
    Leviathann  
       2 天前
    hook 可以抽象任意和状态有关的操作
    AV1
        35
    AV1  
       1 天前   2
    防抖不是刚需。

    而且
    绝大部分在 onclick 事件上用防抖,是错误的。
    防抖是给 oninput 、onmousemove 、onresize 这类高频事件用的。
    你要防止重复的异步网络请求,应该是用 disabled 来禁用按钮,待请求成功后再解除禁用。
    防抖并不能阻止重复的网络请求。
    takeshima
        36
    takeshima  
       1 天前 via iPhone
    @AV1状态更新不是实时的,跟防抖结合起来更好
    sentinelK
        37
    sentinelK  
       1 天前
    @AV1 "绝大部分在 onclick 事件上用防抖,是错误的。
    防抖是给 oninput 、onmousemove 、onresize 这类高频事件用的。"

    没懂,onclick 事件和以上的几个事件有什么区别?
    只要是事件就有可能有防抖的业务需求,是否防抖跟是什么事件无关。防抖也不光指处理程序内部的逻辑噪声。

    对应的,还有个处理方式叫“节流”。

    另外,UI 上的反馈处理和事件上的防抖也并不冲突。UI 变化是人机工效逻辑(用于提示使用者的),事件防抖是业务逻辑(用来防止逻辑错误的)。
    sentinelK
        38
    sentinelK  
       1 天前
    @swulling 同楼上,UI 处理和事件处理其实是完全不相干的两个事儿。要分别对待。
    herbloo
        39
    herbloo  
       8 小时 21 分钟前
    @AV1 说的很对,防抖根本没用
    geminy066
        40
    geminy066  
       6 小时 48 分钟前
    张三要防抖,李四说要节流,王五说要加延迟,赵六说要加立即执行,七七说要... 那么 React 就炸了。

    所以 react 才有各种库...
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2733 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 30ms UTC 14:41 PVG 22:41 LAX 06:41 JFK 09:41
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86