为什么用ref
一般来说,在MVVM框架中,我们不需要操作原生DOM,但是在某些特殊场景,需要操作,如以下场景:
- 操作input的聚焦/不聚焦,媒体播放,文本选择
- 触发强制动画
- 继承第三方DOM库
基于以上场景,react通过refs获取DOM
为什么不用document.querySelector?
因为该浏览器API获取的是整个网页DOM树上的 第一个指定选择器 对应的元素
ref操作DOM 3种方式
方式一:ref="字符串",js中通过this.refs.字符串
- DOM元素上增加ref="字符串",js中通过this.refs.字符串 获取
- 该方式已经不支持了,会警告
方式二:createRef 用得最多
- 引入createRef
- 组件constructor中,增加ref对象
- 元素的ref属性绑定该对象
- 获取元素,ref对象.current
方式三:ref={el=>doSomthing(el)}
ref传入一个回调函数,参数el就是元素本身,且在渲染时候就会执行