React中useRef的具体使用
2021-04-15 04:06
821 查看
相信有过React使用经验的人对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 useRef内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:相关文章推荐
- react中constructor( )和super( )的具体含义以及如何使用
- An iOS Developer on React Native一个资深iOS开发者对于React Native具体使用体验
- react中使用swiper的具体方法
- React-Native中props具体使用详解
- react中constructor()和super()的具体含义以及如何使用
- react中constructor( )和super( )的具体含义以及如何使用
- react中constructor( )和super( )的具体含义以及如何使用
- react中constructor( )和super( )的具体含义以及如何使用
- ReactNative之FlatList的具体使用方法
- 官方推荐react-navigation的具体使用详解
- react-native fetch的具体使用方法
- React组件中的this的具体使用
- ReactNative安装和使用
- FileSystemWatcher使用方法具体解释
- 初识ReactJS的组件化开发(二):组件嵌套和属性的基本使用
- 深度使用react-native的热更新能力,必须知道的一个shell命令
- react前端ui的使用_使用React Morph变形UI过渡
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(二)
- React-Native 之 TextInput使用
- VUE脚手架具体使用方法