React@16.x（11）ref-2，参数类型

在 render 执行时赋值，所以在 render 中获取为 undefined，在 componentDidMount 中可直接使用。

2.1，字符串（不再推荐）

上面已演示过，不再赘述。

2.2，对象

import React, { Component } from "react";
import MyComp from "./components/MyComp";

export default class App extends Component {
    constructor(props) {
        super(props);
        this.comp = React.createRef();
        this.h2 = React.createRef();
    }
    handleClick = () => {
        this.comp.current.method1();
        console.log(this.h2.current.innerText);
    };
    render() {
        return (
            <>
                <MyComp ref={this.comp}></MyComp>
                <h2 ref={this.h2}>h2元素</h2>
                <button onClick={this.handleClick}>获取 ref</button>
            </>
        );
    }
}

通过 React.createRef() 创建。该方法返回值就是一个对象，相当于：

constructor(props) {
    super(props);
    this.comp = {
        current: null,
    };
    this.h2 = {
        current: null,
    };
}

2.3，函数

import React, { Component } from "react";
import MyComp from "./components/MyComp";

export default class App extends Component {
    getRefComp = (el) => {
        this.comp = el;
    };
    getRefH2 = (el) => {
        this.h2 = el;
    };

    handleClick = () => {
        this.comp.method1();
        console.log(this.h2.innerText);
    };
    render() {
        return (
            <>
                <MyComp ref={this.getRefComp}></MyComp>
                <h2 ref={this.getRefH2}>h2元素</h2>
                <button onClick={this.handleClick}>获取 ref</button>
            </>
        );
    }
}

如果函数写在 render 中，那当 render 执行时，该函数会执行2次：

import React, { Component } from "react";

export default class App extends Component {
    state = {
        show: true,
    };
    handleClick = () => {
        this.setState({
            show: !this.state.show // 想再次执行 render
        });
    };
    render() {
        return (
            <>
                <h2
                    ref={(el) => {
                        console.log("el", el);
                        this.h2= el;
                    }}
                ></h2>
                <button onClick={this.handleClick}>获取 ref</button>
            </>
        );
    }
}

执行结果：

函数调用时机

1，render 执行时会调用该函数。

以上面的例子来说，按照执行顺序打印 h2 时，
render 打印 undefined（该函数第一次还没执行），该函数打印 h2 元素，componentDidMount 打印 h2元素。

2，如果 ref 的值发生变动（旧函数被新函数替代），则分别调用旧新函数，时间点在 componentDidUpdate 之前。

• 旧函数调用时，传递 null；
• 新函数调用时，传递对象。

3，如果 ref 所在组件被卸载，也会调用函数，传递 null。