React@16.x（11）ref

1，介绍

reference 引用。和 vue 中的 refs 类似，同样不属于子组件的 props。

场景：

• 需要直接操作 DOM 元素。比如让输入框聚焦。
• 需要使用子组件中的方法。

1.1，得到的结果

1. 作用于内置 HTML 元素，得到真实DOM对象。
2. 作用于类组件，得到类的实例对象。
3. 不能作用于函数组件。

举例：

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

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

MyComp 组件：

import React, { Component } from "react";

export default class MyComp extends Component {
    method1 = () => {
        console.log("子组件的方法");
    };

    render() {
        return <div>子组件</div>;
    }
}

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。

3，注意点

注意使用场景，能使用属性和状态控制，就不要用 ref。

---

以上。