React中useRef的具体使用

这篇文章主要介绍了React中useRef的具体使用，它可以用来获取组件实例对象或者是DOM对象，除此之外还有哪些用法，就一起来了解一下

这篇文章主要介绍了React中useRef的具体使用，它可以用来获取组件实例对象或者是DOM对象，除此之外还有哪些用法，就一起来了解一下

相信有过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>

									    </>

									  );

									}