含义以及使用方法
ref （reference）是引用，在 vue 中是用于或者真实的dom, 那么在react 中，ref 的作用是啥呢？
场景：希望直接使用dom元素中的某个方法，或者希望直接使用自定义组件中的某个方法
ref作用于内置的html组件
ref作用于内置的html组件，得到的将是真实的dom对象
使用string 方式
import React, { Component } from 'react' export default class TestRef extends Component { // 组件挂载完成后打印this componentWillMount() { // 可以通过this.refs.属性名来进行获取 console.log(this); } render() { return ( <div ref='test'> <h1>234234324</h1> </div> ) } }
注意：string 类型的已经过时了哦，不建议使用哦
使用函数方式
函数的调用时间：
1.componentDidMount的时候会调用该函数
1.在componentDidMount事件中可以使用ref
2.如果ref的值发生了变动（旧的函数被新的函数替代），分别调用旧的函数以及新的函数，时间点出现在componentDidUpdate之前
1.旧的函数被调用时，传递null
2.新的函数被调用时，传递对象
3.如果ref所在的组件被卸载，会调用函数
import React, { Component } from 'react' export default class TestRef extends Component { // 组件挂载完成后打印this componentWillMount() { // 这里的this.refs里面是没有任何东西的 console.log(this); } render() { return ( <div ref={(el) => { // 这里可以获取到ref绑定dom 元素，前提是ref 是作用在react 内置组件的。 console.log(el) }}> <h1>234234324</h1> </div> ) } }
效果：
注意：我上面直接在ref 后面绑定的函数不太建议使用哦，原因是每一次渲染（render）或者说是每一次 使用 this.setState({}) 都会创建一个匿名函数，并且进行执行。
解决办法是，直接定义一个函数来进行绑定，就不会出现这个问题的,
结果：
使用react对象方式
需要使用 React.createRef() 这个方式来定义一个对象
样例：
import React, { Component } from 'react' export default class TestRef extends Component { // 定义一个对象的属性，类型是react的对象 private getRef:React.RefObject<HTMLDivElement>; constructor(props:{}){ super(props); this.getRef = React.createRef(); } // 组件挂载完成后打印this componentDidMount() { // 可以通过this.getRef.current 属性名来进行获取 console.log(this); } render() { return ( <div ref={this.getRef}> <h1>234234324</h1> </div> ) } }
结果：
从这个结果来看，我们发现，getRef 是一个普通对象，那么我们手动定义一个对象可以么？
答案是可以的哦？
总的来说，ref 需要使用的最好方式是 直接在属性中定义函数或者 属性来进行赋值，这样的效率最好
ref作用于类组件，得到的将是类的实例
我们知道 上面所说的 react 的内置组件 如 div, ul， li 等普通的html元素获取到的是真实的
样例代码
import React, { Component } from 'react' interface IProp<T> { msg: string, ref: React.RefObject<T> } // 定义A组件 class A extends Component<IProp<A>> { render(){ return <h1>{this.props.msg}</h1> } } export default class TestRef extends Component { private getRef:React.RefObject<A> = React.createRef(); // 组件挂载完成后打印this componentDidMount() { // 可以通过this.getRef.current 属性名来进行获取 实列对象 console.log(this); } render() { return ( <div> <A msg={'2r3242344'} ref={this.getRef}></A> </div> ) } }
结果：
ref不能直接作用于函数组件
函数是没有实例，没有声明周期，ref 不能直接作用于函数组件，如果需要，那么需要使用ref 转发
总结 何时使用 Refs
下面是几个适合使用 refs 的情况：
- 管理焦点，文本选择或媒体播放。
- 触发强制动画。
- 集成第三方 DOM 库。
- 避免使用 refs 来做任何可以通过声明式实现来完成的事情。
