第16节——ref

一、概念

1、出现的原因

在react典型的数据流中，props传递是父子组件交互的唯一方式；通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然，就像react官网所描述的一样，在react典型的数据流之外，某些情况下（例如和第三方的dom库整合，或者某个dom元素focus等）为了修改子组件我们可能需要另一种方式，这就是ref方式。

2、介绍

React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；需要区分一下，ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点

二、ref获取dom

import React from "react";
export default class LearnRef extends React.Component {
  constructor(props) {
    super(props);
    /**
     * 使用React.createRef 创建一个ref对象
     * 来接收dom元素的
     */
    this.myInput = React.createRef();
  }

  getInputDom() {
    console.log(this.myInput);
  }
  render() {
    return (
      

        哈喽 ref
        {/* 
          给dom元素添加ref属性
          这个属性值使我们之前创建的ref对象
          注意：
            ref 是react里面的保留字，做组件传值的时候
            不推荐设置ref的属性
        */}
        
         this.getInputDom()}>获取input的dom
      
    );
  }
}
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
31

三、使用ref实现父组件访问子组件中的数据和方法

import React from "react";

export default class LearnRef2 extends React.Component {
  state = {
    name: "张三",
    age: 11,
  };

  addAge () {
    this.setState({
      age: this.state.age + 1
    })
  }

  render() {
    return (
      

        

          {this.state.name} -- {this.state.age}
        
      
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

四、给ref设置一个回调函数，获取dom元素或者组件实例

1、能够更准确的控制何时refs 被设置和解除

React 会在组件挂载时，调用 ref 回调函数并传入 DOM元素(或React实例)，当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前，React 会保证 Refs 一定是最新的。

2、例子

import React from "react";
import LearnRef2 from "./learn-ref2";

export default class LearnRef3 extends React.Component {

  state = {
    learnRef2: null
  }

  /**
   * 初始化的时候会传入ref组件的实例
   * 组件卸载的时候会传入null
   * @param {} component 
   */
  initComponentRef = (component) => {
    this.learnRef2 = component
  };

  addAge () {
    if (this.learnRef2) {
      this.learnRef2.current.addAge()
    }
  }

  render() {
    return (
      

        
哈喽 ref
        
         this.addAge()}>修改子组件里的年龄
      
    );
  }
}
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
31
32
33
34