useRef是一个方法,且useRef返回一个可变的ref对象
1. 最传统的用法:
首先通过useRef创建一个对象叫h3Dom,并且赋值给button的ref上,这样在获取节点打印处,我们可以打印出对应的DOM
import {useState,useRef} from "react";
export const ShowDiv =()=>{
const [ color,serColor] = useState('red')
const h3Dom =useRef()
//获取节点打印
const getDom =()=>{
console.log(h3Dom.current)
}
return(
<div>
<h3 ref={h3Dom}>字体颜色</h3>
<button ref={{h3Dom}} onClick={()=>getDom()}>点击获取节点</button>
</div>
)
}
2.useRef使用在函数组件的时候
funcation App(){
const refInputNum = React.useRef(null);
React.useEffect(()=>{
refInputNum.current && refInputNum.current.focus();
},[])
return <input ref={refInputNum}/>
},
这里出现了useEffect
,那么就简单介绍一下关于
useEffect
,useEffect
:hook
函数的生命周期
替代
componentDidMount、
componentDidUpdate、
componentWillUnmount
关于useEffect
的使用:
useEffect(()=>{
console.log('组件执行挂载加载')
return()=>{
console.log('组件销毁时候执行')
}
//这里空数组不观察任何状态,只执行主线
},[])
useEffect(()=>{
console.log('组件执行挂载加载')
return()=>{
console.log('组件销毁时候执行')
}
//这里观察count,count改变整个执行
},[count])
3.useRef实现跨渲染周期保存数据
在一个组件中有什么东西可以跨渲染周期,也就是在组件被多次渲染之后依旧不变的属性?第一个想到的应该是state。没错,一个组件的state可以在多次渲染之后依旧不变。但是,state的问题在于一旦修改了它就会造成组件的重新渲染。
那么这个时候就可以使用useRef来跨越渲染周期存储数据,而且对它修改也不会引起组件渲染。
import React, { useState, useEffect, useMemo, useRef } from 'react';
export default function App(props){
const [count, setCount] = useState(0);
const delOneCount = useMemo(() => {
return count - 1;
}, [count]);
const countNum= useRef();
useEffect(() => {
countNum.current = setInterval(()=>{
setCount(count => count + 1);
}, 1000);
}, []);
useEffect(()=>{
if(count < 10){
clearInterval(countNum.current);
}
});
return (
<>
<button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, delNum: {countNum}</button>
</>
);
}
在上面的例子中,我用ref对象的current属性来存储定时器的ID,这样便可以在多次渲染之后依旧保存定时器ID,从而能正常清除定时器。