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 · 2021-04-07 15:50:53 +08:00 · 4531 次点击
    这是一个创建于 1086 天前的主题,其中的信息可能已经有所发展或是发生改变。

    类似于,

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

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

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

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

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

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

    一般不推荐大面积用,Vue 的核心思路是自顶向下传递数据用 prop,自底向上传递数据用 event 。
    DOLLOR
        20
    DOLLOR  
       2021-04-07 19:32:04 +08:00 via Android
    Rocketer
        21
    Rocketer  
       2021-04-07 22:52:11 +08:00 via iPhone
    楼主需要补点 React 的基础知识。

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

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

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

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

    int a =20;

    this.methodByRef(ref a);

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


    public void methodByRef(ref int a){

    a=100;

    }


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

    输出结果是:a=100;
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1093 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 18:55 · PVG 02:55 · LAX 11:55 · JFK 14:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.