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

本文链接：https://blog.csdn.net/weixin_43902189/article/details/99694359

本文介绍了React中useRef, useImperativeHandle, forwardRef的组合应用，强调其灵活性和控制力。同时讲解了useLayoutEffect的作用，用于同步执行DOM更新，并展示了useDebugValue如何在React开发者工具中显示自定义Hook的标记，便于调试。" 101755037,5677891,PHP初级面试知识点总结,"['PHP', '技术面试', 'PHP初级', 'PHP后台开发', '数据库优化']

摘要由CSDN通过智能技术生成

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值：'