释放 useRef 的力量：React 开发人员综合指南

不幸的是，useRef 被低估了。它不是最流行的钩子之一，但它是有益的。知道如何以及在哪里使用它可以取得很好的效果。

让我们从基础开始

useRef 是一个 React Hook，可让您引用渲染不需要的值。

React 会记住你通过 useRef 创建的值，无论你是创建一个引用 DOM 中的节点的 JavaScript 对象还是一个简单的值，并且它在重新渲染期间不会丢失。

它给我们带来了什么？

1. 访问 DOM 元素：

   • 您可以轻松访问 DOM 中的元素。例如，您可以获取输入字段的值、关注特定元素、获取其高度和宽度、滚动到屏幕的特定部分等等。

2. 存储可变值：

   • 您可以记住您需要的任何数据，而无需重新渲染组件。例如，如果您需要计数器或计时器，请选择 useRef 而不是 useState。

示例

这里有一些示例来说明 useRef 的强大功能。

示例 1：对数字的引用

import React, { useRef } from 'react';

const Counter = () => {
  const refCount = useRef(0);
  const refInputField = useRef(null);

  const onClick = () => {
    refCount.current = refCount.current + 1;
    refInputField.current.focus();
  }

  return (
    <>
      <button onClick={onClick}>
        Click me!
      </button>
      <input ref={refInputField} />
    </>
  );
};

export default Counter;

在此示例中：

• refCount 是对数字的可变引用。
• refInputField 是对输入元素的引用。
• 单击按钮时，计数器会递增，并且输入字段获得焦点。

示例 2：跟踪以前的值

useRef 的另一个常见用例是跟踪以前的值。

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

const PreviousValue = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

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

  return (
    <div>
      <h1>Current Count: {count}</h1>
      <h2>Previous Count: {prevCountRef.current}</h2>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default PreviousValue;

在此示例中：

• prevCountRef 跟踪之前的计数值。
• 只要计数发生变化，useEffect 挂钩就会更新 prevCountRef.current。
• 这允许您显示当前和以前的计数，而不会触发不必要的重新渲染。

useRef 的高级提示和技巧

1. 跨渲染保持值

useRef 可用于跨渲染持久保存值，而不会导致重新渲染，这与 useState 不同。这对于存储不直接影响 UI 但需要记住的值特别有用。

示例：跟踪组件的渲染计数。

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

const RenderCounter = () => {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current += 1;
  });

  return (
    <div>
      <p>This component has rendered {renderCount.current} times</p>
    </div>
  );
};

export default RenderCounter;

2. 与第三方库集成

在使用需要直接操作 DOM 元素的第三方库（例如与图表库集成、管理视频播放器或处理动画）时，useRef 非常有用。

示例：集成图表库。

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const ChartComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
          label: 'Sales',
          data: [65, 59, 80, 81],
        }],
      },
    });
  }, []);

  return <canvas ref={chartRef}></canvas>;
};

export default ChartComponent;

3. 避免复杂应用程序中不必要的重新渲染

在性能至关重要的复杂应用程序中，使用 useRef 存储可变对象可以帮助避免不必要的重新渲染。

示例：存储可变状态对象。

import React, { useRef } from 'react';

const MutableState = () => {
  const state = useRef({
    name: 'John Doe',
    age: 30,
  });

  const updateName = (newName) => {
    state.current.name = newName;
    console.log('Name updated:', state.current.name);
  };

  return (
    <div>
      <button onClick={() => updateName('Jane Doe')}>
        Update Name
      </button>
    </div>
  );
};

export default MutableState;

4. 避免关闭问题

使用 useRef 可以通过提供对跨渲染持续存在的值的稳定引用来帮助避免关闭问题。

示例：使用 useRef 的计时器以避免过时状态。

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

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(countRef.current + 1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return <div>Count: {count}</div>;
};

export default Timer;

结论

钩子很棒，你应该使用它们。如果您了解 React 的工作原理并正确应用 hooks，您可以取得很多成就。 useRef 对于以下方面特别强大：

• 访问和操作 DOM 元素。
• 存储不触发重新渲染的可变值。
• 跨渲染保持值。
• 与第三方库集成。
• 避免复杂应用程序中不必要的重新渲染。
• 缓解关闭问题。

通过理解和利用useRef，你可以编写更高效、更有效的React组件。 Hooks 的真正力量在于理解它们的行为并明智地应用它们。

你知道吗，useState并不总是正确的答案？

以上是释放 useRef 的力量：React 开发人员综合指南的详细内容。更多信息请关注PHP中文网其他相关文章！