当前位置：首页 > news >正文

React 中的useRef 和 useTransition

news 来源：原创 2025/5/23 23:13:51

1. useRef简介

由于 React 会自动处理更新 DOM 以匹配你的渲染输出，因此你在组件中通常不需要操作 DOM。但是，有时你可能需要访问由 React 管理的 DOM 元素。例如，让一个节点获得焦点、滚动到它或测量它的尺寸和位置。在 React 中没有内置的方法来做这些事情，所以你需要一个指向 DOM 节点的 ref 来实现。

useRef 是一个 React Hook，它能帮助引用一个不需要渲染的值。

const ref = useRef(initialValue)

2. useRef案例


import {useRef,useState} from "react"

function App() {

    const [text,setText] = useState("");

    // 声明一个引用
    const userRef = useRef<HTMLInputElement>(null);

    const handleClick =()=>{

        // 当前引用的值
        setText(userRef.current?.value || "");

        // 引用的样式类
        console.log(userRef.current?.className);
        // red

        // 当前引用聚焦
        userRef.current?.focus();
    }
    return (
        <div>
            {/* 元素绑定引用 */}

            <input type="text" ref={userRef} className="red"/>
            <button onClick={handleClick}>设置</button>
            <div>{text}</div>

        </div>
    )

}


export default App

3. useTransition简介

useTransition 是一个帮助你在不阻塞 UI 的情况下更新状态的 React Hook，允许你通过标记更新将提供的回调函数作为一个过渡任务。

const [isPending, startTransition] = useTransition()

4. useTransition 案例


import {useState,useTransition} from "react"


function App() {

    // 声明字符
    const [query,setQuery] = useState('');
    // 声明数组
    const [list,setList] = useState<any>([]);

    // 声明过渡
    const [isPedding,startTransition] = useTransition();

    // 点击操作
    const handleChange = (e:any) =>{
        // 设置输入
        setQuery(e.target.value)
        // 添加过渡
        startTransition(()=>{
            const arr = Array.from({length:5000}).fill(1);
            setList([...list,...arr]);
        })
    }

    return (
        <div>
            <input type="text" onChange={handleChange}/>
            <div>
                {isPedding?(
                    <div>加载中……</div>
                ):(
                    list.map((item:number,index:number)=>{
                        return <p key={index}>{query}</p>
                    })
                )}
            </div>
        </div>
    )
}

export default App