React—useRef

墨蓝 2023-06-08 04:53 16阅读 0赞

相信有过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，从而能正常清除定时器。