React进阶用法和hooks - 5.useRef,useImperativeHandle和forwardRef的结合使用以及useLayoutEffect、useDebugValue的简单使用

5.useRef,useImperativeHandle和forwardRef的结合使用以及useLayoutEffect、useDebugValue的简单使用

注意:hooks只能在函数(无状态组件)中使用

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。（官方介绍）

从上面可以发现，useRef比createRef来说，更加的灵活，也更好的控制

forwardRef:引用父组件的ref实例，成为子组件的一个参数，可以引用父组件的ref绑定到子组件自身的节点上.

useImperativeHandle : 第一个参数，接收一个通过forwardRef引用父组件的ref实例，第二个参数一个回调函数，返回一个对象,对象里面存储需要暴露给父组件的属性或方法

可以查看官网hookApi了解相关知识，官方建议useImperativeHandle和forwardRef同时使用，减少暴露给父组件的属性，避免使用 ref 这样的命令式代码

废话不多说，上使用useImperativeHandle和forwardRef的组合代码

//Test.tsx文件
import React, {
    FC, Fragment, useRef, MutableRefObject, forwardRef, ForwardRefExoticComponent, Ref, useImperativeHandle, ChangeEvent, SyntheticEvent, memo } from "react";
const Test: FC = (): JSX.Element => {
   
    const testRef: MutableRefObject<any> = useRef('test');
    const handleClick = (e:SyntheticEvent<HTMLButtonElement>):void =>{
   
        console.log('自身button的内容：',e.currentTarget.innerText);
        console.log('子组件input的对象:',testRef.current);
        console.log('子组件input的value值：'