之前我是做 WPF 的,在 WPF 里的控件(对应 Web 前端的组件)都有一个 Name 属性,在后台代码里可以直接通过这个 Name 属性获取控件的实例,以及根据控件的实例属性获取他全部子元素的实例,然后进行一些操作。 但是接触到 Web 前端框架过后,发现无论是 Vue 还是 React 都不能像 WPF 一样方便获取组件的实例,而是需要一个不是很直观的 ref 来辅助获取,而且即使获取到了,在通过代码获取子组件也很困难,比如 Ant Design 的 Tabs 控件,除非为所有的 items 的 children 手动添加 ref ,否则是没法获取每个 children 的实例的。 所以现在很疑惑,应该怎么理解 Vue 和 React 都有的 ref 这个概念?为什么要这样设计呢? ref, 实例, 控件, 获取
react hook 的 ref 类比是 java 的 threadlocal ,更准确的说是未来的 scopedValue 绑定到组件实例只是一个特殊用法 react 的思维模型是声明式+单向数据流,渲染结果是 state 的映射,脱离 state 直接操作组件本体是 anti-pattern
有些组件是受控组件,由它的父组件的状态来管理,这时候要是直接被别的组件随便改了就出现意料之外的情况了。而且组件是否刷新也要根据状态来定,并且有明确的层级关系才方便确定哪些组件需要刷新。并且组件也不是一直存在的,随时都会创建和销毁