快捷導航

React Hooks之useRef獲取元素示例詳解

更新時間：2023年07月17日 10:30:03 作者：YiYa_咿呀

這篇文章主要介紹了React Hooks之useRef獲取元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

什么是useRef Hook?

useRef就是createRef的Hook版本用來獲取元素, 只不過比createRef更強大一點

createRef只能獲取普通元素和類元素，并且只能獲取到類組件的實例對象，不能拿到函數(shù)式組件

import React, {createRef, useRef} from 'react';
class Home extends React.PureComponent{
    render() {
        return (
            <div>Home</div>
        )
    }
}
function About() {
    return (
        <div>About</div>
    )
}
function App() {
    const pRef = createRef();
    const homeRef = createRef();
    function btnClick() {
        console.log(pRef.current);
        console.log(homeRef.current);
    }
    return (
        <div>
            <p ref={pRef}>我是段落</p>
            <Home ref={homeRef}/>
            <About/>
            <button onClick={()=>{btnClick()}}>獲取</button>
        </div>
    )
}
export default App;

import React, {createRef, useRef} from 'react';
class Home extends React.PureComponent{
    render() {
        return (
            <div>Home</div>
        )
    }
}
function About() {
    return (
        <div>About</div>
    )
}
function App() {
    // const pRef = createRef();
    // const homeRef = createRef();
    const pRef = useRef();
    const homeRef = useRef();
    function btnClick() {
        console.log(pRef.current);
        console.log(homeRef.current);
    }
    return (
        <div>
            <p ref={pRef}>我是段落</p>
            <Home ref={homeRef}/>
            <About/>
            <button onClick={()=>{btnClick()}}>獲取</button>
        </div>
    )
}
export default App;

兩種方法都能拿到ref,結(jié)果如下：

createRef和useRef

useState和useRef區(qū)別:

useRef中保存的數(shù)據(jù), 除非手動修改, 否則永遠都不會發(fā)生變化

const age = useRef(18);

如果說useRef也可以保存數(shù)據(jù)的話那么為什么還要有useState呢？

function App() {
    const pRef = createRef();
    const homeRef = useRef();
    function btnClick() {
        console.log(pRef); // {current: p}
        console.log(homeRef); // {current: Home}
    }
    const [numState, setNumState] = useState(0);
    // const age = useRef(18); // {current: 18}
    const age = useRef(numState); // {current: 0}
    useEffect(()=>{
        age.current = numState;
    }, [numState]);
    return (
        <div>
            <p>上一次的值: {age.current}</p>
            <p>當前的值  :{numState}</p>
            <button onClick={()=>{setNumState(numState + 1)}}>增加</button>
        </div>
    )
}
export default App;