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

React 写的越多,就越想直接操作 DOM

  •  
  •   aikilan · 5 天前 · 4372 次点击

    越写越烦躁,要兼顾性能,要兼顾语法,还要考虑优雅。。。很多小场景明明知道直接操作 dom 来的又快又准,又不敢瞎搞。

    30 条回复    2025-04-10 09:58:04 +08:00
    weixind
        1
    weixind  
       5 天前   ❤️ 1
    --- 很多小场景明明知道直接操作 dom 来的又快又准。

    可以举例说明吗,操作 dom 不是啥禁术。有适用的场景当然可以用。
    twig
        2
    twig  
       5 天前
    非要操作 dom 的话,在 React 里可能还是需要把 ref 传来传去才安全。
    chenliangngng
        3
    chenliangngng  
       5 天前   ❤️ 2
    给个 id 不就可以操作了
    peteretep
        4
    peteretep  
       5 天前   ❤️ 1
    框架和风格就像武林门派,拜进此门,就是选择了可靠和一致性,放弃了个性。

    不爽随时退
    xiuming
        5
    xiuming  
       5 天前
    不让操作 dom 用框架用魔怔了 框架就不操作 dom 了
    aikilan
        6
    aikilan  
    OP
       5 天前
    @xiuming 该操作还是会操作的,但是小场景就很纠结。。。。是保持风格统一还是人死吊朝天
    sjhhjx0122
        7
    sjhhjx0122  
       5 天前
    用 ref 操作 dom 没事的,大把组件库都这么干
    sentinelK
        8
    sentinelK  
       5 天前
    各种框架的作用核心是通过规训、限制一线开发的技术实现,最终从而达到更高的标准化、去耦和合作效率。

    你用了框架,你就得认他的规则和限制。狗粮管饱,代价是你得带项圈。
    aikilan
        9
    aikilan  
    OP
       5 天前
    @sentinelK 确实有种戴着项圈 coding 的意思
    greensea
        10
    greensea  
       5 天前
    ![]( https://pic3.zhimg.com/v2-d6281f9eae238597d7c3eef15171d4fa_r.jpg)

    小场景确实直接操作 DOM 比较方便,等别人把框架配置好,我这边工作量都完成一半了
    paopjian
        11
    paopjian  
       5 天前
    看这帖子还想了会怎么回事, 我们代码框架还太过原始了, 套着 vue 的皮开发着原生 html, 上手 dom 都不是啥问题
    visper
        12
    visper  
       5 天前
    ref 拿到 dom 操作就行,比较恐怖的是经常看到有人给个 class 或者 id 然后 document.querySelector 查...
    Razio
        13
    Razio  
       5 天前
    是你自己给自己戴项圈的吧,谁不让你写了,顶多就是需要再解决一些副作用。性能、语法、优雅,那叫做优化,没有更好的解决方案之前就别操那心思
    quqiu
        14
    quqiu  
       5 天前
    想起来被 jquery 支配的恐惧。
    修一个 bug ,搞出来三个 bug 。
    DOLLOR
        15
    DOLLOR  
       5 天前   ❤️ 1
    @visper
    更恐怖的是,有的人离开 jquery 就不会操作 DOM 了,不知道 querySelector 是什么,为了解决个简单问题还要在框架代码里塞个 jquery.min.js ,然后$(xxx)像病毒一样到处传染。
    NewYear
        16
    NewYear  
       5 天前
    前几天把自己油猴脚本的 JQ 去掉了。

    代码变冗长了许多,不喜欢呢。
    importmeta
        17
    importmeta  
       5 天前
    是的, 之前写 setState 一样的感觉, 真的服了.
    kneo
        18
    kneo  
       5 天前 via Android   ❤️ 3
    可能只是你 react 不熟练。
    Nyeshuai
        19
    Nyeshuai  
       5 天前 via Android
    除开动画,布局类的,业务开发还有操作 dom 的场景? xxRef.current 和 querySelector 没差吧。react 的引用操作已经算自然了,vue 尼玛是靠两个 name 匹配。
    dango33
        20
    dango33  
       5 天前
    @greensea 如果小到一个 HTML 就可以对付的场景,那确实直接操作 DOM 就行,但是交互上稍微多点的还是这些 UI 库用着更方便,也不用配置,最简单的下好 vite 、react 、react-dom ,建一个 html 和一个 jsx 就可以开始写了。
    jingrui
        21
    jingrui  
       5 天前
    今天看了 30k star github vue 代码,看着快吐了。。。感觉 react 清爽多了,就是比较绕
    gouflv
        22
    gouflv  
       5 天前 via iPhone
    @jingrui vue 社区的代码质量一言难尽。

    如果是 vue3 jsx 风格,我个人感觉会比 react 简洁
    crackidz
        23
    crackidz  
       5 天前
    boring stack 永远有市场
    ragnaroks
        24
    ragnaroks  
       5 天前
    理论上来说,只是实施业务的开发人员是不需要直接操作 DOM 的。不过 react 的条件渲染比较糙确实可能存在操作 DOM 更方便的可能。
    cj323
        25
    cj323  
       5 天前
    记得几年前写 vue 的时候曾经配着 jquery 。挺好的,出活快,也不会担心过几年写法变了。
    shaozelin030405
        26
    shaozelin030405  
       4 天前
    你想一下,为什么要用 react...
    alleluya
        27
    alleluya  
       4 天前
    @DOLLOR #15 这都算知道 jq 是用来干嘛的, 我现在手头接的项目引入一个 jq, 就是为了$.ajax 我真是服了 明明封装了 request 的方法 直接用就行... 看了下是三方接口 可能是不会在 vue 里处理 baseURL
    wangtian2020
        28
    wangtian2020  
       4 天前
    我也喜欢 ref 指定微操,看同事写的 vue 代码 watch computed 再加上 map filter 多层 for 循环直接页面都卡着不动了
    dabingbing
        29
    dabingbing  
       3 天前
    我就想问下,react 没有 vue 的 v-if. v-for ,各位大佬,对于这种条件语句处理,react 和 vue 觉得哪种更爽呢? 前端小白一名
    z00i
        30
    z00i  
       3 天前
    我遇到有两类场景 一个很多动画的场景,直接用 ref 操作 dom ,又快又清晰;一个是 video 之类的操作,这个很多 api 就是个命令操作,包装成 state ,太蛋疼了。

    其他的,一般业务场景基本没用过 dom api
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   968 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 22:54 · PVG 06:54 · LAX 15:54 · JFK 18:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.