9-2、ref的值类型

ref的值根据节点类型而有所不同：

1. 当ref属性用于HTML元素时，构造函数中使用React.createRed()创建的ref接收底层DOM元素作为current属性
2. 当ref属性用于自定义class组件时，ref对象接收组件的挂载实例作为其current属性
3. 不能在函数组件上使用ref属性，因为他们没有实例

函数式组件没有实例，无法通过ref获取他们的实例:
但是某些时候想要获取函数式组件中的某个DOM元素，可以通过React.forwardRef

import React, { PureComponent, createRef } from 'react';

class Counter extends PureComponent {
    constructor (props) {
        super(props);

        this.state = {
            counter: 0
        }
    }

    render () {
        const { counter } = this.state
        return (
            <div>
                <h2>当前计数：{counter}</h2>
                <button onClick={ e => this.increment()}>+1</button>
            </div>
        );
    }

    increment () {
        this.setState({
            counter: this.state.counter + 1
        })
    }
}

export default class App extends PureComponent {
    constructor(props) {
        super(props);

        this.titleRef2 = createRef()
        this.titleFun = null
        this.counterRef = createRef()
    }

    render () {
        return (
            <div>
                {/*ref=字符串/对象/函数*/}
                <h2 ref='titleRef'>字符串</h2>
                {/*目前react推荐的方式*/}
                <h2 ref={this.titleRef2}>对象</h2>
                <h2 ref={ac => { this.titleFun = ac }}>函数</h2>
                <button onClick={e => this.changeDom()}>改变DOM</button>
                <hr/>
                <Counter ref={this.counterRef}/>
                <button onClick={e => this.appChange()}>App</button>
            </div>
        );
    }

    changeDom () {
        // 1、使用方式一：字符串（不推荐，后续的更新可能会删除）
        this.refs.titleRef.innerHTML = '字符串2'
        // 2、使用方式二：对象方式
        this.titleRef2.current.innerHTML = '对象2'
        // 3、使用方式三：回调函数
        this.titleFun.innerHTML = '函数2'
    }

    appChange () {
        console.log(this.counterRef, this.counterRef.current)
        this.counterRef.current.increment()
    }
}