useRef 做了什么反应 - JavaScript

在开发 React 应用时，我们通常需要处理许多不同的组件和状态。在这种情况下，我们可能需要使用 React 的 useRef 钩子。这个钩子可以用来引用 DOM 元素或任意其他值，使其在组件之间共享和持久化。

下面我们来探索一下 useRef 做了什么反应。

useRef 是什么

useRef 是 React 提供的一个钩子，它可以用来获取一个持久化的引用。这个引用可以是指任意类型的值，包括 DOM 元素、对象、函数等等。

使用 useRef

使用 useRef 非常简单。我们只需要在组件中调用它，并将初始值传递给它。然后，我们可以使用该引用来访问该值。

以下是一个使用 useRef 的示例代码片段：

import React, { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  const handleClick = () => {
    console.log(myRef.current);
  };

  return (
    <div>
      <div ref={myRef}>Hello, world!</div>
      <button onClick={handleClick}>Log Ref</button>
    </div>
  );
}

在上面的例子中，我们创建了一个名为 myRef 的引用，并将其传递给了一个 div 元素。该元素的引用现在存储在 myRef.current 属性中。

当我们单击按钮时，handleClick 函数将打印 myRef.current 属性的值。在本例中，它将是指向 div 元素的引用。

useRef 的其他用途

除了在组件中获取 DOM 元素的引用，useRef 还有许多其他用途。

以下是一些示例：

• 在 useEffect 钩子中保存变量的值：我们可以使用 useRef 来存储变量的引用。这样可以确保该值在每次渲染时保持一致。

  import React, { useEffect, useRef } from 'react';
  
  function MyComponent() {
    const countRef = useRef(0);
  
    useEffect(() => {
      countRef.current += 1;
      console.log(countRef.current);
    });
  
    return <div>Hello, world!</div>;
  }
  

  在上面的例子中，我们创建了一个名为 countRef 的引用，并将其用作 useEffect 钩子中的计数器。每当 MyComponent 组件被重新渲染时，useEffect 钩子将自动更新计数器并将其值打印到控制台。

• 存储上一个状态：我们可以使用 useRef 来存储组件的上一个状态。这样可以使我们的代码更加简洁和可读。

  import React, { useEffect, useRef, useState } from 'react';
  
  function MyComponent() {
    const [count, setCount] = useState(0);
    const prevCountRef = useRef();
  
    useEffect(() => {
      prevCountRef.current = count;
    });
  
    const handleClick = () => {
      setCount(count + 1);
    };
  
    return (
      <div>
        <div>Current Count: {count}</div>
        <div>Previous Count: {prevCountRef.current}</div>
        <button onClick={handleClick}>Increment Count</button>
      </div>
    );
  }
  

  在上面的例子中，我们创建了一个名为 prevCountRef 的引用，并将其用作 count 变量的上一个状态。每当 MyComponent 组件被重新渲染时，useEffect 钩子将自动更新 prevCountRef 中存储的值。