React中useRef的用法有什么?怎样实现�
Admin 2021-10-23 群英技术资�
React中useRef的用法有什么?如果有使用过React的朋友,应该对ref会比较熟悉的点,ref可以用来获取组件实例对象或者是DOM对象,而useRef这个hooks函数,除了传统的用法之外,它还可以“跨渲染周期”保存数据。那么具体怎样用呢?下面我们就一起来了解看看�
首先来看一下它传统的用法:
import React, { useState, useEffect, useMemo, useRef } from 'react'; export default function App(props){ const [count, setCount] = useState(0); const doubleCount = useMemo(() => { return 2 * count; }, [count]); const couterRef = useRef(); useEffect(() => { document.title = `The value is ${count}`; console.log(couterRef.current); }, [count]); return ( <> <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button> </> ); }
代码中用useRef创建了couterRef对象,并将其赋给了button的ref属性。这样,通过访问couterRef.current就可以访问到button对应的DOM对象�
然后再来看看它保存数据的用法�
在一个组件中有什么东西可以跨渲染周期,也就是在组件被多次渲染之后依旧不变的属性?第一个想到的应该是state。没错,一个组件的state可以在多次渲染之后依旧不变。但是,state的问题在于一旦修改了它就会造成组件的重新渲染�
那么这个时候就可以使用useRef来跨越渲染周期存储数据,而且对它修改也不会引起组件渲染�
import React, { useState, useEffect, useMemo, useRef } from 'react'; export default function App(props){ const [count, setCount] = useState(0); const doubleCount = useMemo(() => { return 2 * count; }, [count]); const timerID = useRef(); useEffect(() => { timerID.current = setInterval(()=>{ setCount(count => count + 1); }, 1000); }, []); useEffect(()=>{ if(count > 10){ clearInterval(timerID.current); } }); return ( <> <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button> </> ); }
在上面的例子中,我用ref对象的current属性来存储定时器的ID,这样便可以在多次渲染之后依旧保存定时器ID,从而能正常清除定时器�
以上就是React中useRef的用法的相关的介绍,上述示例具有一定的借鉴价值,有需要的朋友可以参考学习,希望对大家学习React的使用有帮助,想要了解更多可以继续浏览群英网络其他相关的文章�
文本转载自脚本之�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要介绍了解决js中的setInterval清空定时器不管用问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
移动端页面适配,rem和vw适配,本文主要介绍了vue项目中使用rem替换px的实现示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
这篇文章主要介绍了Element el-button 按钮组件的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
简单复制对象的最外层属性,不处理对象更深层次的对象属性,会导致复制对象和原始对象的深层次属性指向同一个内存。如果一个对象改变了内存的地址,就会影响另一个对象�
今天给大家分享的是关于JavaScript中链式调用的内容,那么JavaScript中链式调用是什么意思?下面就给大家来详细的介绍一下链式调用以及方法,感兴趣的朋友接下来跟随小编一起看看吧�
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078