react 组件 进阶之 ref （ts 版本）_react ts ref

含义以及使用方法

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>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意：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>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果：

注意：我上面直接在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>
    )
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

结果：

从这个结果来看，我们发现，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>
    )
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

结果：

ref不能直接作用于函数组件

函数是没有实例，没有声明周期，ref 不能直接作用于函数组件，如果需要，那么需要使用ref 转发

总结 何时使用 Refs

下面是几个适合使用 refs 的情况：

• 管理焦点，文本选择或媒体播放。
• 触发强制动画。
• 集成第三方 DOM 库。
• 避免使用 refs 来做任何可以通过声明式实现来完成的事情。