useref用法全面解析

一、useref是什麼

useref是React的一個hooks，它的作用是可以用來引用React組件中的DOM元素、組件或函數，常用於頁面中DOM元素的操作、函數的調用等。它是一個可以取代class中ref的方式，可以更好地操作組件中的DOM元素。

二、useref的基本用法

要使用useRef首先需要先聲明一個ref變數，如下：

  
import React, { useRef } from 'react';

const DemoComponent = () => {
  const refVariable = useRef(null);
  
  return (
    <div ref={refVariable}>
      <h1>Hello World!</h1>
    </div>
  );
};

export default DemoComponent;
  

上面代碼中，我們聲明了一個名為refVariable的變數，並通過useRef(null)賦初始值為null。在組件中，我們將refVariable通過ref屬性傳遞到了div中，這意味著我們可以在組件中通過refVariable引用這個div，如下：

  
import React, { useRef } from 'react';

const DemoComponent = () => {
  const refVariable = useRef(null);

  const handleClick = () => {
    refVariable.current.style.backgroundColor = 'red';
  };
  
  return (
    <div ref={refVariable}>
      <h1>Hello World!</h1>
      <button onClick={handleClick}>Change Color</button>
    </div>
  );
};

export default DemoComponent;
  

上面代碼中，我們在組件中定義一個click事件監聽器handleClick，並在其中通過refVariable.current訪問到了div元素，將其backgroundColor改為了red。

三、useref的高級用法

1. 訪問子組件的元素

除了能夠訪問組件中的元素，useref還可以用於訪問子組件的元素。如下：

  
import React, { useRef } from 'react';

const ChildComponent = () => (
    <div>
      <h2>Child Component</h2>
      <p>Some text.</p>
    </div>
);

const ParentComponent = () => {
  const childRef = useRef(null);
  
  const handleClick = () => {
    childRef.current.style.backgroundColor = 'red';
  };
  
  return (
    <div>
      <h1>Hello World!</h1>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Change Color</button>
    </div>
  );
};

export default ParentComponent;
  

上面代碼中，我們在ParentComponent組件中渲染了ChildComponent，並通過ref屬性將childRef傳遞給了ChildComponent，同時在ParentComponent組件中定義了一個click事件監聽器，通過childRef.current訪問到了ChildComponent中的div元素，將其backgroundColor改為了red。

2. 保存最新的值

useref可以幫助我們保存最新的狀態值，而不需要重新渲染組件。比如，我們在一個計時器組件中，需要保存當前計時器的值，可以使用下面的代碼：

  
import React, { useState, useRef } from 'react';

const Timer = () => {
  const [count, setCount] = useState(0);
  const intervalRef = useRef();

  const startTimer = () => {
    intervalRef.current = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(intervalRef.current);
  };

  return (
    <div>
      <h2>Timer: {count}</h2>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
};

export default Timer;
  

上面代碼中，我們使用了useState來保存計時器的值，並使用useRef來保存interval的值。在startTimer函數中，我們通過intervalRef.current來保存setInterval的值。當我們點擊stopTimer按鈕時，通過clearInterval清除計時器。

3. 防止閉包陷阱

當我們在React組件中定義一個函數式組件時，經常會遇到循環中定義函數導致的閉包陷阱。這是因為在JavaScript中，每次循環都會創建一個新的作用域，在循環中定義的函數會綁定到當前作用域，而不是全局作用域。為了避免這種情況，我們可以使用useRef來保存值。如下：

  
import React, { useState, useEffect, useRef } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  const intervalRef = useRef();

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);

    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);

  return (
    <div>
      <h2>Count: {count}</h2>
    </div>
  );
};

export default Counter;
  

在上面的代碼中，我們使用了useRef來保存intervalRef的值，而不是使用閉包陷阱。

四、總結

在本文中，我們介紹了useref的基本用法和高級用法，包括訪問DOM元素、訪問子組件的元素、保存最新的值和防止閉包陷阱。使用useref可以更好地操作React組件中的DOM元素、組件或函數，並且幫助我們避免在使用函數式組件時遇到的閉包陷阱問題。