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

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

  •  
  •   aikilan · 17 天前 · 4650 次点击

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

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

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

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

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

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

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

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

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