Ref
React提供了一个属性ref,用于表示对组价实例的引用,其实就是ReactDOM.render()返回的组件实例:
- ReactDOM.render()渲染组件时返回的是组件实例;
- 渲染dom元素时,返回是具体的dom节点。
ref
可以挂载到组件上也可以是dom元素上;
- 挂到组件(class声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性,因为它们没有实例:
- 挂载到dom元素上时表示具体的dom元素节点。
useRef()
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={timerID} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button>
</>
);
}
在上面的例子中,我用ref
对象的current
属性来存储定时器的ID,这样便可以在多次渲染之后依旧保存定时器ID,从而能正常清除定时器。
参考资料:
- React之ref:https://www.jianshu.com/p/56ace3e7f565
- React—useRef:https://blog.csdn.net/hjc256/article/details/102587037