React函数式Hooks-useRef()用法

函数式组件本身就没有实例，所以没有dom等于无法通过ref获取，而useRef则可以提供获取函数式组件的dom

用途：

1. 获取dom
2. 获取共享数据

父组件获取子组件的dom

import React, { useState, useCallback, useRef, PureComponent } from 'react'
class Counter extends PureComponent {
    render() {
        const { props } = this;
        return (
            <button onClick={props.onClick}>{props.count}执行</button>
        )
    }
}
function UseRefTemplate() {
    const [count, setCount] = useState(0)
    const countref = useRef()
    let timer
    const onClickFuntion = useCallback(() => {
        console.log(countref.current) //获取dom
    }, [count]);
    return (
        <div>
            <Counter ref={countref} count={count} onClick={onClickFuntion} />
        </div>
    )
}
export default UseRefTemplate

 父组件执行子组件的方法

import React, { Component, useState, useMemo, memo, useCallback, useRef, PureComponent, useEffect } from 'react'
class Counter extends PureComponent {
    run() {
        console.log('执行')
    }
    render() {
        const { props } = this;
        return (
            <button onClick={props.onClick}>{props.count}执行</button>
        )
    }
}
function UseRefTemplat2() {
    const [count, setCount] = useState(0)
    const countref = useRef()
    let timer
    const onClickFuntion = useCallback(() => {
        console.log(countref.current) //获取dom
        countref.current.run()//执行子组件
    }, [count]);
    return (
        <div>
            <Counter ref={countref} count={count} onClick={onClickFuntion} />
        </div>
    )
}
export default UseRefTemplat2