类似于,
<input ref={这个东东} type="text" />
或者,reactjs 里面的 useRef,还经常看到 forwardRef, etc.
可是,一直都弄不明白,这个 Ref 到底是个啥?有没有文档能够言简意赅的讲清楚的?谢谢
p.s. 不知道这个主题是应该放到 html 还是 javascript,版主觉得要是不合适,帮忙搬一下。谢谢。
类似于,
<input ref={这个东东} type="text" />
或者,reactjs 里面的 useRef,还经常看到 forwardRef, etc.
可是,一直都弄不明白,这个 Ref 到底是个啥?有没有文档能够言简意赅的讲清楚的?谢谢
p.s. 不知道这个主题是应该放到 html 还是 javascript,版主觉得要是不合适,帮忙搬一下。谢谢。
|
mxT52CRuqR6o5Apr 7, 2021
1
|
|
66betaApr 7, 2021 via Android
2
|
|
vivipureApr 7, 2021
3
React 和 Vue 中都有 ref, 主要是为了框架操作 dom 或者组件用的;也没啥好记得
|
|
4
操作 dom 或者调用组件方法时用的
|
|
cydysmApr 7, 2021
5
用来获取 element 实例
|
|
RomeoHongApr 7, 2021
6
可以理解类似于引用 /指针,对 DOM 对象或组件实例的引用,引用后可以调用 DOM 对象上或组件实例的上的方法
|
|
superrichmanApr 7, 2021 via iPhone
7
这玩意是不是跟 getElementById 差不多?
|
|
dablwowApr 7, 2021
8
就是 referrence,代表引用,又因为“引用”概念宽泛,实际代表的含义取决于各场景实际所需
|
|
liuy1994gApr 7, 2021
9
“引用”
|
|
IsaacYoungApr 7, 2021
10
ref = {current: any}
|
|
11
在原生 dom 上用获取该 dom,在组件上用获取该实例
|
|
momocraftApr 7, 2021
12
一個 callback 函數或對象 box
react 完成渲染後把相關對象 (dom element 或 class component) 傳進去, 你去用 |
|
JoooooooooApr 7, 2021
13
就是引用的意思 reference
|
|
Kasumi20Apr 7, 2021
14
一个 ObjectWrapper,比如 Java 中的匿名函数访问函数内部的 int 变量时,必须是 final 的,无法修改,但是可以用一个 ObjectWrapper{ public int value }把这个 int 变量包装一下。
|
|
nnnToTnnnApr 7, 2021
15
好家伙, 吓我一跳, 我以为 html 里面居然有 ref 来取变量, 那岂不是前端要变天, 我一看, w3c 的文档还是老样子.
如果是 react 或则其他三方库 ,ref 表示 这个元素的 引用, 可以通过它来使用真实的 dom 元素的一些方法和属性. |
|
annielongApr 7, 2021
16
第三方的库,看第三方的说明,原生 html 没有这个
|
|
MeteorCatApr 7, 2021 via Android
17
react 主要用来标识某个组件,方便直接查找访问
|
|
xiaojun1994Apr 7, 2021
18
引用啊
|
|
no1xsyzyApr 7, 2021
19
是 React 和 Vue 里类似 getElement(s)By* 或者 Query Selector 的一个东西,但设计上相对更稳健和可预测
一般不推荐大面积用,Vue 的核心思路是自顶向下传递数据用 prop,自底向上传递数据用 event 。 |
|
AV1Apr 7, 2021 via Android
20
|
|
RocketerApr 7, 2021 via iPhone
21
楼主需要补点 React 的基础知识。
一方面,React 是函数式编程,要想改变对象的状态,不是更新对象里面的值,而是用新的值重新生成一个新的对象。但任何模式都不是万能的,ref 的存在就是为了照顾一些确实需要访问同一对象的情况。 另一方面,React 里的<input ref={这个东东} type="text" />也不是 html,而是 jsx,它是仿照 html 的语法写的,但又很不一样。 |
|
feeeffApr 8, 2021
22
@Rocketer 老哥你好 对你这段话不是特别理解
> 一方面,React 是函数式编程,要想改变对象的状态,不是更新对象里面的值,而是用新的值重新生成一个新的对象。但任何模式都不是万能的,ref 的存在就是为了照顾一些确实需要访问同一对象的情况。 哪些情况是 「照顾一些确实需要访问同一对象」,能举个例子吗?谢谢了 |
|
learningmanApr 8, 2021 via Android
23
@feeeff 比如说你这个网页不是全部用 react 写的,你要访问一些历史遗留的组件上的值,不就只能用这个了吗
|
|
dablwowApr 8, 2021
24
@feeeff 比如,一个组件在每次渲染时,都要对比上一次的 props 值,并根据结果做不同的处理。
这里就需要一个 ref 来缓存旧的 props,用 useState 的话会造成额外的渲染 |
|
pkupyxApr 8, 2021
25
历史来看,类似于 jQuery 的$("xxx"),主要是有些操作例如 scrollView.scrollTo({x,y});并不是很方便通过< scrollToX={x}>的方式来实现,所以留了 ref 来获取 react 的 node 的引用。
|
|
MikeLeiApr 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; |