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

2021-04-07 15:50:53 +08:00
 yazoox

类似于,

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

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

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

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

4594 次点击
所在节点    JavaScript
26 条回复
Rocketer
2021-04-07 22:52:11 +08:00
楼主需要补点 React 的基础知识。

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

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

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

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/768757

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX