推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
yazoox

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

  •  
  •   yazoox · Apr 7, 2021 · 6338 views
    This topic created in 2039 days ago, the information mentioned may be changed or developed.

    类似于,

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

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

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

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

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

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

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

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

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

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

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

    int a =20;

    this.methodByRef(ref a);

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


    public void methodByRef(ref int a){

    a=100;

    }


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

    输出结果是:a=100;
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2301 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 63ms · UTC 11:17 · PVG 19:17 · LAX 03:17 · JFK 06:17
    ♥ Do have faith in what you're doing.