怎么理解 Vue 和 React 都有的 ref 这个概念？为什么要这样设计？

[WangLiCha]

之前我是做 WPF 的，在 WPF 里的控件（对应 Web 前端的组件）都有一个 Name 属性，在后台代码里可以直接通过这个 Name 属性获取控件的实例，以及根据控件的实例属性获取他全部子元素的实例，然后进行一些操作。

但是接触到 Web 前端框架过后，发现无论是 Vue 还是 React 都不能像 WPF 一样方便获取组件的实例，而是需要一个不是很直观的 ref 来辅助获取，而且即使获取到了，在通过代码获取子组件也很困难，比如 Ant Design 的 Tabs 控件，除非为所有的 items 的 children 手动添加 ref ，否则是没法获取每个 children 的实例的。

所以现在很疑惑，应该怎么理解 Vue 和 React 都有的 ref 这个概念？为什么要这样设计呢？

[zxCoder]

别问，问就是前端工程化

[azcvcza]

用来搞一些比较接近 dom 的操作。在页面读取文件的时候，拿 state 去存总是拿不到的时候，只能上 ref 了

[jchnxu]

因为大部分变量都是 immutable ，或者你至少要用 immutable 的思路去用。实在没法 immutable 的东西，就用个引用来解决

原生的 UI 框架 WPF / Cocoa 之类的 基本没有走 immutable 这条路，所以不需要

[ifOnly]

vue 、react 等框架目的不就是为了避免直接操作 dom （比如 jq ），ref 相当于后门？

[SilentDepth]

Vue 、React 等视图框架的目的是让开发者可以更方便地实现界面而无需过分关心底层元素的操作过程。但有时候我们就是需要直接访问底层元素，比如我们的业务无法通过视图框架直接实现，或者我们需要使用一些第三方库来实现业务而第三方库的工作机制独立于视图框架之外。这个时候就需要视图框架提供一种机制来让开发者可以访问到底层元素。在 Vue 和 React 中，这个机制就是 ref 。

在常规 Web 开发中，你给元素加上一个 id 也能实现类似的效果，不论是通过 window.<id> 还是 document.getElementById(<id>)。但一来这需要你处理可能的命名冲突，二来这需要你自行实现读写和缓存的逻辑，开发体验就不太好。另外，Vue 和 React 都有意区分数据结构和渲染目标的概念，甚至允许你自行实现一个渲染器。那当一个 Vue/React App 渲染的不再是一个普通的 DOM 树，没有 id 机制，怎么办？这时你只能靠 ref 机制了。

[momocraft]

1. 让你的代码能访问到 instance (DOM element 或框架 component) 的方法
2. 让你的代码有一个 在整个 component lifecycle 中稳定的 box