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

react 同时被 2 个专栏收录
11 篇文章 1 订阅
22 篇文章 0 订阅

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值:',testRef.current.value);
        console.log('子组件input的类型:',testRef.current.type());
    }
    return (
        <Fragment>
            <TestChildForward ref={testRef} />
            <button onClick={handleClick}>获取子组件的input的value和type</button>
        </Fragment>
    );
}
export default Test;
function TestChild(props:{},ref: Ref<any>): JSX.Element {
    const testRef: MutableRefObject<any> = useRef();//创建一个自身的ref,绑定到标签节点上
    //暴露出一个想要让父组件知道的对象,里面可以是属性也可以是函数
    useImperativeHandle(ref,()=>{//第一个参数,要暴露给哪个(ref)?第二个参数要暴露出什么?
        return {
            //(testRef.current as HTMLInputElement) 类型断言,自己肯定就是这样的类型
            value:(testRef.current as HTMLInputElement).value,//暴露出input的value
            type:()=>(testRef.current as HTMLInputElement).type//暴露出input的type类型
        }
    });
    return (
        <>
            <input type="text" value={'input的内容'} ref={testRef} onChange={(e:ChangeEvent<HTMLInputElement>)=>{
                console.log(e.currentTarget.value);
                console.log(e.currentTarget.type);
            }}/>
        </>
    );
}
const TestChildForward:ForwardRefExoticComponent<any> = memo(forwardRef(TestChild));

运行结果:

在这里插入图片描述

从上面的结果可以看到,当我们不想向父组件暴露太多的东西的时候,可以使用useImperativeHandle来按需暴露给父组件一些东西
而useLayoutEffect则和useEffect差不多相似,官方介绍是:其函数签名与 useEffect 相同,但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前,useLayoutEffect 内部的更新计划将被同步刷新。尽可能使用标准的 useEffect 以避免阻塞视觉更新。
就是在你需要让所有的dom变更后同时执行所有的useEffect的时候来使用,可以用来读取dom,之后同步触发重新render。
emmmm… 不知道怎么演示,就这样了,接下来我们看一下useDebugValue的使用
useDebugValue,目的是能在react的浏览器调试工具上显示你的自定义hooks,或者给hooks标记一些东西
当使用一个参数的时候,就是把第一个参数标记在react的调试工具上,下面写一个简单的例子
import React, { useDebugValue, useState } from 'react';

const useTest = () => {
    const [str, setStr] = useState<string>('');
    useDebugValue('debug');
    return {
        str, setStr
    }
}
export default (): JSX.Element => {
    const { str, setStr } = useTest();
    return (
        <>
            <h2>{str}</h2>
            <button onClick={() => {
                setStr('重新渲染');
            }}>这是???</button>
        </>
    );
}

在这里插入图片描述
会在自定义的hooks标记到react的调试工具上面,主要用于调试工具调试使用

当传入第二个参数的情况下,第二个参数是一个回调函数,会把第一个参数当成自己的形参传入,进行一系列的操作,return回去,然后才会在react调试工具的hooks中打印出来,不然不会显示
import React, { useDebugValue, useState } from 'react';

const useTest = () => {
    const [str, setStr] = useState<string>('');
    useDebugValue(str, (value:string) => {
        console.log(value);
        return '这是改造后的' + value;
    });
    return {
        str, setStr
    }
}
export default (): JSX.Element => {
    const { str, setStr } = useTest();
    return (
        <>
            <h2>{str}</h2>
            <button onClick={() => {
                setStr('重新渲染');
            }}>这是???</button>
        </>
    );
}
结果:

在这里插入图片描述

同时在控制台上打印了一个空字符

在这里插入图片描述

由于str的初始值是空的,所以打印就是空的了,这只是调试使用,hooks差不多就这些了,没有其他的了

下面会写一些管理react和vue的一些TypeScript类型的总结
React进阶用法和hooks的个人使用见解:
1.lazy+Suspense懒加载的使用
2.hooks的useState、useEffect、自定义钩子的实际使用
3.useCallback+useMemo+memo性能优化
4.useReducer+useContext+createContext的使用、模拟redux合并reducer

  • 5
    点赞
  • 0
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<span style="font-size:24px;">前言</span><br /> <br /> <span style="font-size:18px;">如释重负,好用的技术就应该越来越简单</span><br /> React HooksReact 16.8 从提案转为正式加入的新特性。这个新特性是个非常棒的设计。 可以说对于React 技术栈的发展具分割线一样的意义。讲师在课程中提到:之前使用 React 作为主要的前端技术,开发一款网页游戏。在整个游戏的各个模块中,Redux ,mobx,以及蚂蚁金服的 ant-design,dva, umi 这些框架或者第三方库都有涉及使用。但是自从了解了Facebook官方提案的 Hooks 特性后,才真正觉得获得了前所未有的解脱。如果你有React开发经验,学习了解 Hooks 后,一定有一种如释重负的轻松感。<br /> <br /> <span style="font-size:18px;">React 带来了方便也带来了迷茫</span><br /> 相信关心 React Hooks 这项新特性的童鞋,很多已经有了一定的 React 开发经验。那么你一定有所体验,React 给我们带来方便的同时,也的确长久以来的前端开发模式有极大的不同。React 并不需要用继承,而是推荐用嵌套。React 有独特的 jsx 语法。大多数情况 jsx 都使得我们的代码更加简洁了。然而有些时候也给我们带来了一些困扰。 比如数据的传递,逻辑的复用。 react 是一种 mvvm 的设计模式,作为开发者一定要清楚,那些数据是业务数据,那些数据是UI数据。否则你的代码很有可能会陷入混乱局面。<br /> <br /> <span style="font-size:18px;">大型项目中模块化与功能解耦困难</span><br /> 在公司项目中 App 稍大的时候,我们发现状态提升只通过 props 进行数据传递。很多时候都很难实现我们的需求。这时无论我们是否清楚的了解,但是状态管理也就是 redux mobx 等,轻易地进入到了公司的项目中。我们经过初期的尝试发现状态管理,确实比用纯粹的 React 带来了数据传递上的方便,以及代码组织上的清晰。但前提是你看懂且理解了 redux 大神晦涩的官网文档。 本来 React 被设计用来组件化前端开发。但当我们初期使用状态管理,我们常常会过度的使用状态数据,业务逻辑ui逻辑没有清楚的分离,最终你的应用代码结果可能是:除了少数几个组件是独立的解耦的,大多数组件都因为状态数据的共享而耦合在了一起,且他们也完全依赖状态管理框架。无法再轻松的转移复用。使用高阶组件,属性渲染,渲染回调等高级特性,确实可以帮我们解决模块或功能的解耦问题。但是这些方法,确实有点超出普通“猿类”的技能。且降低了代码的可读性,对于团队协作,这是很致命的问题。<br /> <br /> <span style="font-size:18px;">React Hooks 真正开启前端模块化的金钥匙</span><br /> 对于以上问题,React Hooks 都有很好的解决方案,官方的设计动机就是解决这些曾经的繁琐,化繁为简。React Hooks 让我们在纯函数中就可以使用 React 的众多特性。而不必使用类。代码扁平,易读。解耦状态相关逻辑,UI逻辑业务逻辑更好的分离。这些逻辑往往是纯函数,而以前很容易混合在类组件中。通过自定义 Hooks 我们可以把应用中“状态相关”逻辑解耦出来,独立编写到我们自己的hooks 中。从而更加易于复用独立测试。<br />
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值