功能组件中的 useRef - Javascript

在 React 中，useRef 是一个用于访问 DOM 元素或其他被 React 创建的组件实例的钩子函数，它返回一个可以在函数组件中保存任何可变值的对象。

使用方式

获取 DOM 元素

当需要从函数组件中获取一个 DOM 元素的引用时，可以使用 useRef。下面是一个例子，获取元素的引用并设置其背景颜色：

import React, { useRef } from 'react';

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

  function handleClick() {
    myRef.current.style.backgroundColor = 'red';
  }

  return (
    <div ref={myRef} onClick={handleClick}>
      Click me!
    </div>
  );
}

保存之前的状态

在某些情况下，我们需要在组件重新渲染之间保存某个值，以便在下一次渲染中对其进行比较。这是 useRef 也可以起作用的地方。

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

function MyComponent() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  const prevCount = prevCountRef.current;

  return (
    <div>
      <p>Current count: {count}</p>
      {prevCount && <p>Previous count: {prevCount}</p>}
      <button onClick={() => setCount(count + 1)}>Increase count</button>
    </div>
  );
}

在这个例子中，我们使用 useRef 来保存前一个计数，以便在每次组件重新渲染时比较当前计数和上一个计数。

总结

使用 useRef 钩子函数可以在函数组件中引用 DOM 元素或保存之前的状态值。在上面的示例中，我们已经看到如何使用它来实现这两个功能。在实际项目中，这个函数还有很多用处，可以根据需要自行使用。