React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react useRef使用和渲染

react中useRef的使用和渲染机制

作者：暴走的皮卡丘

本文主要介绍了react中useRef的使用和渲染机制,react useRef

前言

刚开始使用react时，由于对react的hook不太了解，导致在使用useState时，出现了闭包的问题，当时搜索解决方法时，发现了useRef这个hook可以很快的解决这个问题。这里用来记录下自己对useRef这个hook的理解。

useRef的渲染机制

先要了解react中useRef和useState的区别，useState是用来管理组件状态的，而useRef是用来管理组件引用的。useState会导致组件重新渲染，而useRef不会。对应上面说的useRef解决闭包问题，其实不是react设置该hook的初衷，useRef这个hook的初衷是用来解决DOM操作问题的。能够解决闭包问题也只是其副作用之一。对于useRef的渲染机制我们可以总结以下几个关键点：

以下是基于useRef的渲染机制的代码示例，组件使用了antd的Button和Card组件，从代码运行中我们可以看出，点击更新Ref值按钮，组件没有重新渲染，但是点击更新State值按钮，组件会重新渲染。

import { Button, Card } from "antd";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";

const DemoRef = () => {
    const ref = useRef<any>(null)
    // 渲染次数
    const renderCountRef = useRef(1);
    const renderValueRef = useRef<any>(0);
    const [renderValue, setRenderValue] = useState<any>(0);

    useEffect(() => {
        renderCountRef.current = renderCountRef.current + 1;
        console.log(`🔄 组件第 ${renderCountRef.current + 1} 次渲染`);
    });

    return <div className="flex w-full">
        <Card title="useRef的渲染机制" className="ml-12px" hoverable={true}>
            <div className="mt-12px max-w-200px text-[#e74c3c] bg-[#fffacd] p-4 text-[18px] font-bold flex w-full flex-row w-400px">
                组件渲染此时：<span className="font-bold">{renderCountRef.current}</span>
            </div>
            <Button onClick={() => {
                renderValueRef.current = renderCountRef.current + 1;
            }} className="mt-12px">更新Ref值</Button>
            <div className="mt-12px font-bold mb-12px">当前Ref值：{renderValueRef.current}(点击虽然新增了，但是组件没有重新渲染，导致此处仍然时老的值)</div>
            <Button onClick={() => {
                setRenderValue((pre: number) => pre + 1);
            }}>更新State值</Button>
            <div className="mt-12px font-bold">当前State值：{renderValue}(点击会触发组件重新渲染，导致此处的值会更新)</div>
        </Card>

    </div>
}

useRef解决的问题

useRef的好兄弟forwardRef

在日常的开发中，多层组件嵌套是常有的场景，例如父组件中嵌套子组件，子组件中又嵌套孙子组件等。在这种场景下，我们偶尔会需要在父组件中操作子组件的DOM。这时候，如果直接在子组件上使用useRef，会获取不到子组件的DOM并且控制还会报错，原因是react为了保证组件的封装性，默认情况下自定义的组件是不会暴漏其内部DOM节点的ref，具体错误大家可以自己试试。报错提示中会提示我们在子组件中需要使用forwardRef来转发ref。

import { Button, Card } from "antd";
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";

const LoginForm = forwardRef((props: any, ref: React.ForwardedRef<{ reset: (flag: boolean) => void; }>) => {
    const { name } = props;
    const [formData, setFormData] = useState({
        username: '',
        password: ''
    });
    useImperativeHandle(ref, () => ({
        // 重置表单内容
        reset: () => {
            setFormData({
                username: '',
                password: ''
            })
        },
    }));
    return <div className="mt-12px font-bold">
        <h2>{name}</h2>
        <div>
            <div className="mt-12px">
                用户名：<Input type="text" value={formData.username} onChange={(e) => {
                    setFormData({
                        ...formData,
                        username: e.target.value
                    })
                }} />
            </div>
            <div className="mt-12px">
                密码：<Input type="password" value={formData.password} onChange={(e) => {
                    setFormData({
                        ...formData,
                        password: e.target.value
                    })
                }} />
            </div>
        </div>
    </div>
})
//父组件
  <Card title="useRef和useForwardRef的组合" className="ml-12px" hoverable={true}>
            <Button onClick={() => {
                childRef.current?.reset();
            }} type="primary">重置</Button>
            <Divider></Divider>
            <LoginForm name="登录表单" ref={childRef} />
        </Card>

到此这篇关于react中useRef的使用和渲染机制的文章就介绍到这了,更多相关react useRef使用和渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文