react hooks已经是大势所趋，简单整理一下useRef的使用：

useRef基础

1、useRef返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( initialValue )。
2、返回的 ref 对象在组件的整个生命周期内保持不变，每次返回同一个引用
3、当更新 current 值时并不会引起页面重新渲染
4、更新 useRef 是 side effect (副作用)，所以一般写在 useEffect 或 event 里
5、useRef 类似于类组件的 this

const domRef = useRef(initialValue)

为什么用useRef

页面不需要重新渲染，就可以取到最新的值

如何优雅获取子组件

通过useImperativeHandle，配合forwardRef

import React, {
    MutableRefObject,
    useState,
    useImperativeHandle,
    useRef,
    forwardRef,
    useCallback
} from 'react'
interface IProps {
    label: string
}
let ChildInput = forwardRef((props: IProps, ref: any) => {
    const { label } = props
    const [value, setValue] = useState('')
    // 作用: 减少父组件获取的DOM元素属性,只暴露给父组件需要用到的DOM方法
    // 参数1: 父组件传递的ref属性
    // 参数2: 返回一个对象,父组件通过ref.current调用对象中方法
    useImperativeHandle(ref, () => ({
        getValue
    }))
    const handleChange = (e: any) => {
        const value = e.target.value
        setValue(value)
    }
    const getValue = useCallback(() => {
        return value
    }, [value])
    return (
        <div>
            <span>{label}:</span>
            <input type="text" value={value} onChange={handleChange} />
        </div>
    )
})
const ParentCom: React.FC = (props: any) => {
    const childRef: MutableRefObject<any> = useRef({})
    const handleFocus = () => {
        const node = childRef.current
        console.log(node.getValue())
    }
    return (
        <div>
            <ChildInput label={'名称'} ref={childRef} />
            <button onClick={handleFocus}>focus</button>
        </div>
    )
}
export default ParentCom

常用使用场景

定时器
获取Dom元素
定义不需要引起页面渲染的变量
等等