React Hooks之useRef获取元素示例详解

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

这篇文章主要介绍了React Hooks之useRef获取元素示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

什么是useRef Hook?

useRef就是createRef的Hook版本用来获取元素, 只不过比createRef更强大一点

createRef只能获取普通元素和类元素，并且只能获取到类组件的实例对象，不能拿到函数式组件

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,结果如下：

createRef和useRef

useState和useRef区别:

useRef中保存的数据, 除非手动修改, 否则永远都不会发生变化

const age = useRef(18);

如果说useRef也可以保存数据的话那么为什么还要有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;

总结

useRef可以获取元素，可以保存数据，和createRef的区别是可以保存数据，和useState的区别是：useRef中保存的数据, 除非手动修改, 否则永远都不会发生变化

以上就是React Hooks之useRef获取元素示例详解的详细内容，更多关于React Hooks之useRef的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
这篇文章主要介绍了React Native中ScrollView组件轮播图与ListView渲染列表组件用法,结合实例形式详细分析了ScrollView组件轮播图与ListView渲染列表组件具体功能、使用方法与操作注意事项,需要的朋友可以参考下
2020-01-01
学习ahooks useRequest并实现手写
这篇文章主要为大家介绍了学习ahooks useRequest并实现手写示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
React antd tabs切换造成子组件重复刷新
这篇文章主要介绍了React antd tabs切换造成子组件重复刷新,需要的朋友可以参考下
2021-04-04
React Router V6更新内容详解
这篇文章主要为大家介绍了React Router V6更新内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
React Native项目中使用Lottie动画的方法
这篇文章主要介绍了React Native 实现Lottie动画的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2021-10-10
React报错Element type is invalid解决案例
这篇文章主要为大家介绍了React报错Element type is invalid解决案例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
react echarts tooltip 区域新加输入框编辑保存数据功能
这篇文章主要介绍了react echarts tooltip 区域新加输入框编辑保存数据功能,大概思路是用一个div包裹echarts, 然后在echarts的同级新建一个div用来用来模拟真实tooltip，通过鼠标移入移出事件控制真实tooltip的显示与隐藏，需要的朋友可以参考下
2023-05-05
解决React报错Style prop value must be a
这篇文章主要为大家介绍了React报错Style prop value must be an object解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
阿里低代码框架lowcode-engine设置默认容器详解
这篇文章主要为大家介绍了阿里低代码框架lowcode-engine设置默认容器详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
详解react应用中的DOM DIFF算法
这篇文章主要介绍了react应用中的DOM DIFF算法，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下
2021-04-04