V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
yazoox
V2EX  ›  JavaScript

楼主一直没有弄明白,那个 ref 对象 到底是啥? html 里面好像有, react 里面也经常看到,什么 useRef

  •  
  •   yazoox · 14 天前 · 2574 次点击

    类似于,

      <input ref={这个东东} type="text" />
    

    或者,reactjs 里面的 useRef,还经常看到 forwardRef, etc.

    可是,一直都弄不明白,这个 Ref 到底是个啥?有没有文档能够言简意赅的讲清楚的?谢谢

    p.s. 不知道这个主题是应该放到 html 还是 javascript,版主觉得要是不合适,帮忙搬一下。谢谢。

    26 条回复    2021-04-08 14:37:38 +08:00
    vivipure
        3
    vivipure   14 天前
    React 和 Vue 中都有 ref, 主要是为了框架操作 dom 或者组件用的;也没啥好记得
    zhuweiyou
        4
    zhuweiyou   14 天前   ❤️ 1
    操作 dom 或者调用组件方法时用的
    cydysm
        5
    cydysm   14 天前
    用来获取 element 实例
    RomeoHong
        6
    RomeoHong   14 天前
    可以理解类似于引用 /指针,对 DOM 对象或组件实例的引用,引用后可以调用 DOM 对象上或组件实例的上的方法
    superrichman
        7
    superrichman   14 天前 via iPhone
    这玩意是不是跟 getElementById 差不多?
    dablwow
        8
    dablwow   14 天前
    就是 referrence,代表引用,又因为“引用”概念宽泛,实际代表的含义取决于各场景实际所需
    liuy1994g
        9
    liuy1994g   14 天前
    “引用”
    IsaacYoung
        10
    IsaacYoung   14 天前
    ref = {current: any}
    liuy1994g
        11
    liuy1994g   14 天前   ❤️ 3
    在原生 dom 上用获取该 dom,在组件上用获取该实例
    momocraft
        12
    momocraft   14 天前
    一個 callback 函數或對象 box
    react 完成渲染後把相關對象 (dom element 或 class component) 傳進去, 你去用
    Jooooooooo
        13
    Jooooooooo   14 天前
    就是引用的意思 reference
    Kasumi20
        14
    Kasumi20   14 天前
    一个 ObjectWrapper,比如 Java 中的匿名函数访问函数内部的 int 变量时,必须是 final 的,无法修改,但是可以用一个 ObjectWrapper{ public int value }把这个 int 变量包装一下。
    nnnToTnnn
        15
    nnnToTnnn   14 天前
    好家伙, 吓我一跳, 我以为 html 里面居然有 ref 来取变量, 那岂不是前端要变天, 我一看, w3c 的文档还是老样子.

    如果是 react 或则其他三方库 ,ref 表示 这个元素的 引用, 可以通过它来使用真实的 dom 元素的一些方法和属性.
    annielong
        16
    annielong   14 天前
    第三方的库,看第三方的说明,原生 html 没有这个
    MeteorCat
        17
    MeteorCat   14 天前 via Android
    react 主要用来标识某个组件,方便直接查找访问
    xiaojun1994
        18
    xiaojun1994   14 天前
    引用啊
    no1xsyzy
        19
    no1xsyzy   14 天前
    是 React 和 Vue 里类似 getElement(s)By* 或者 Query Selector 的一个东西,但设计上相对更稳健和可预测

    一般不推荐大面积用,Vue 的核心思路是自顶向下传递数据用 prop,自底向上传递数据用 event 。
    DOLLOR
        20
    DOLLOR   14 天前 via Android
    Rocketer
        21
    Rocketer   14 天前 via iPhone
    楼主需要补点 React 的基础知识。

    一方面,React 是函数式编程,要想改变对象的状态,不是更新对象里面的值,而是用新的值重新生成一个新的对象。但任何模式都不是万能的,ref 的存在就是为了照顾一些确实需要访问同一对象的情况。

    另一方面,React 里的<input ref={这个东东} type="text" />也不是 html,而是 jsx,它是仿照 html 的语法写的,但又很不一样。
    feeeff
        22
    feeeff   13 天前
    @Rocketer 老哥你好 对你这段话不是特别理解

    > 一方面,React 是函数式编程,要想改变对象的状态,不是更新对象里面的值,而是用新的值重新生成一个新的对象。但任何模式都不是万能的,ref 的存在就是为了照顾一些确实需要访问同一对象的情况。

    哪些情况是 「照顾一些确实需要访问同一对象」,能举个例子吗?谢谢了
    learningman
        23
    learningman   13 天前 via Android
    @feeeff 比如说你这个网页不是全部用 react 写的,你要访问一些历史遗留的组件上的值,不就只能用这个了吗
    dablwow
        24
    dablwow   13 天前
    @feeeff 比如,一个组件在每次渲染时,都要对比上一次的 props 值,并根据结果做不同的处理。
    这里就需要一个 ref 来缓存旧的 props,用 useState 的话会造成额外的渲染
    pkupyx
        25
    pkupyx   13 天前
    历史来看,类似于 jQuery 的$("xxx"),主要是有些操作例如 scrollView.scrollTo({x,y});并不是很方便通过< scrollToX={x}>的方式来实现,所以留了 ref 来获取 react 的 node 的引用。
    MikeLei
        26
    MikeLei   13 天前
    引用传递参数,例如:

    int a =20;

    this.methodByRef(ref a);

    Console.WriteLine("a={0}",a);


    public void methodByRef(ref int a){

    a=100;

    }


    /////////////////////////////////////

    输出结果是:a=100;
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1563 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 17:03 · PVG 01:03 · LAX 10:03 · JFK 13:03
    ♥ Do have faith in what you're doing.