推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
楼主一直没有弄明白，那个 ref 对象 到底是啥？ html 里面好像有， react 里面也经常看到，什么 useRef
yazoox · 2021-04-07 15:50:53 +08:00 · 4803 次点击这是一个创建于 1326 天前的主题，其中的信息可能已经有所发展或是发生改变。
类似于，
<input ref={这个东东} type="text" />
或者，reactjs 里面的 useRef，还经常看到 forwardRef, etc.
可是，一直都弄不明白，这个 Ref 到底是个啥？有没有文档能够言简意赅的讲清楚的？谢谢
p.s. 不知道这个主题是应该放到 html 还是 javascript，版主觉得要是不合适，帮忙搬一下。谢谢。
 |
1
mxT52CRuqR6o5 2021-04-07 15:52:48 +08:00
|
 |
2
66beta 2021-04-07 15:53:35 +08:00 via Android
|
 |
3
vivipure 2021-04-07 15:56:23 +08:00
React 和 Vue 中都有 ref, 主要是为了框架操作 dom 或者组件用的；也没啥好记得
|
 |
4
zhuweiyou 2021-04-07 15:59:33 +08:00  1
操作 dom 或者调用组件方法时用的
|
 |
5
cydysm 2021-04-07 16:00:48 +08:00
用来获取 element 实例
|
 |
6
RomeoHong 2021-04-07 16:04:44 +08:00
可以理解类似于引用 /指针，对 DOM 对象或组件实例的引用，引用后可以调用 DOM 对象上或组件实例的上的方法
|
 |
7
superrichman 2021-04-07 16:04:53 +08:00 via iPhone
这玩意是不是跟 getElementById 差不多？
|
 |
8
dablwow 2021-04-07 16:13:01 +08:00
就是 referrence，代表引用，又因为“引用”概念宽泛，实际代表的含义取决于各场景实际所需
|
 |
9
liuy1994g 2021-04-07 16:17:18 +08:00
“引用”
|
 |
10
IsaacYoung 2021-04-07 16:17:29 +08:00
ref = {current: any}
|
|
11
liuy1994g 2021-04-07 16:17:58 +08:00 3
在原生 dom 上用获取该 dom，在组件上用获取该实例
|
 |
12
momocraft 2021-04-07 16:22:35 +08:00
一個 callback 函數或對象 box
react 完成渲染後把相關對象 (dom element 或 class component) 傳進去, 你去用 |
 |
13
Jooooooooo 2021-04-07 16:27:17 +08:00
就是引用的意思 reference
|
 |
14
Kasumi20 2021-04-07 16:33:58 +08:00
一个 ObjectWrapper，比如 Java 中的匿名函数访问函数内部的 int 变量时，必须是 final 的，无法修改，但是可以用一个 ObjectWrapper{ public int value }把这个 int 变量包装一下。
|
 |
15
nnnToTnnn 2021-04-07 16:52:07 +08:00
好家伙, 吓我一跳, 我以为 html 里面居然有 ref 来取变量, 那岂不是前端要变天, 我一看, w3c 的文档还是老样子.
如果是 react 或则其他三方库 ,ref 表示 这个元素的 引用, 可以通过它来使用真实的 dom 元素的一些方法和属性. |
 |
16
annielong 2021-04-07 18:17:35 +08:00
第三方的库，看第三方的说明，原生 html 没有这个
|
 |
17
MeteorCat 2021-04-07 18:26:12 +08:00 via Android
react 主要用来标识某个组件，方便直接查找访问
|
 |
18
xiaojun1994 2021-04-07 18:35:15 +08:00
引用啊
|
 |
19
no1xsyzy 2021-04-07 18:58:04 +08:00
是 React 和 Vue 里类似 getElement(s)By* 或者 Query Selector 的一个东西，但设计上相对更稳健和可预测
一般不推荐大面积用，Vue 的核心思路是自顶向下传递数据用 prop，自底向上传递数据用 event 。 |
 |
20
DOLLOR 2021-04-07 19:32:04 +08:00 via Android
|
 |
21
Rocketer 2021-04-07 22:52:11 +08:00 via iPhone
楼主需要补点 React 的基础知识。
一方面，React 是函数式编程，要想改变对象的状态，不是更新对象里面的值，而是用新的值重新生成一个新的对象。但任何模式都不是万能的，ref 的存在就是为了照顾一些确实需要访问同一对象的情况。 另一方面，React 里的<input ref={这个东东} type="text" />也不是 html，而是 jsx，它是仿照 html 的语法写的，但又很不一样。 |
 |
22
feeeff 2021-04-08 08:59:44 +08:00
@Rocketer 老哥你好 对你这段话不是特别理解
> 一方面，React 是函数式编程，要想改变对象的状态，不是更新对象里面的值，而是用新的值重新生成一个新的对象。但任何模式都不是万能的，ref 的存在就是为了照顾一些确实需要访问同一对象的情况。 哪些情况是 「照顾一些确实需要访问同一对象」，能举个例子吗？谢谢了 |
 |
23
learningman 2021-04-08 10:00:29 +08:00 via Android
@feeeff 比如说你这个网页不是全部用 react 写的，你要访问一些历史遗留的组件上的值，不就只能用这个了吗
|
|
24
dablwow 2021-04-08 11:17:59 +08:00
@feeeff 比如，一个组件在每次渲染时，都要对比上一次的 props 值，并根据结果做不同的处理。
这里就需要一个 ref 来缓存旧的 props，用 useState 的话会造成额外的渲染 |
 |
25
pkupyx 2021-04-08 12:26:49 +08:00
历史来看，类似于 jQuery 的$("xxx")，主要是有些操作例如 scrollView.scrollTo({x,y});并不是很方便通过< scrollToX={x}>的方式来实现，所以留了 ref 来获取 react 的 node 的引用。
|
 |
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; |
Select Language