天津网站建设服务公司淘宝网官方网站
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