技术文献

React Hooks: useRef 的作用

2026-10-02

※说明:useRef<T>其实是泛型函数(Hook)。

 

作用一:useRef 能保持组件刷新后,其值不会变。

import { useRef} from "react";

type Props = {
    
};

export function Child({}: Props) {

    const countRef = useRef<number>(0);

    const handleClick = () => {
        countRef.current++;
        console.log(countRef.current);
    }

    return (
        <div>
                <button onClick={handleClick}>Click</button>
        </div>
    );
}

 

作用二:useRef 对于element元素的绑定。

import {useEffect, useRef} from "react";

type Props = {

};

export function Child2({}: Props) {

    const inputRef = useRef<HTMLInputElement | null>(null);

    useEffect(()=>{
        inputRef.current?.focus();
    })

    return (
        <div>
            <input ref={inputRef}  type='text' placeholder='Input something' />
        </div>
    );
}