脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Hooks之useRef

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实现翻页时钟的代码示例

    React实现翻页时钟的代码示例

    本文给大家介绍了React实现翻页时钟的代码示例,翻页时钟把数字分为上下两部分,翻页效果的实现需要通过设置 position 把所有的数组放在同一个位置叠加起来,文中有详细的代码讲解,需要的朋友可以参考下
    2023-08-08
  • React diff算法的实现示例

    React diff算法的实现示例

    这篇文章主要介绍了React diff算法的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 浅谈React Event实现原理

    浅谈React Event实现原理

    这篇文章主要介绍了浅谈React Event实现原理,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React中CSS模块冲突的问题及解决

    React中CSS模块冲突的问题及解决

    本文将探讨 React 中 CSS 模块冲突的常见原因,并提供解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • 关于react+antd样式不生效问题的解决方式

    关于react+antd样式不生效问题的解决方式

    最近本人在使用Antd开发时遇到些问题,所以下面这篇文章主要给大家介绍了关于react+antd样式不生效问题的解决方式,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • webpack3+React 的配置全解

    webpack3+React 的配置全解

    本篇文章主要介绍了webpack3+React 的配置全解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React中Key属性作用

    React中Key属性作用

    react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,本文主要介绍了React中Key属性作用,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • React为 Vue 引入容器组件和展示组件的教程详解

    React为 Vue 引入容器组件和展示组件的教程详解

    这篇文章主要介绍了React为 Vue 引入容器组件和展示组件的教程详解，文中很详细的给大家介绍了使用容器组件的原因,需要的朋友可以参考下
    2018-05-05
  • React进行路由跳转的方法汇总

    React进行路由跳转的方法汇总

    在 React 中进行路由跳转有多种方法,具体取决于你使用的路由库和版本,以下是常见的路由跳转方法汇总,主要基于 react-router-dom 库,文中并通过代码示例介绍的非常详细,需要的朋友可以参考下
    2025-02-02
  • 解决antd的Table组件使用rowSelection属性实现多选时遇到的bug

    解决antd的Table组件使用rowSelection属性实现多选时遇到的bug

    这篇文章主要介绍了解决antd的Table组件使用rowSelection属性实现多选时遇到的bug问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08

最新评论