使用 React useRef Hook 掌握 DOM 操作和性能

理解 React useRef Hook：从零到英雄

介绍

使用 React 构建应用程序时，开发人员面临的一个关键挑战是管理组件状态和性能。 React 的 useState 钩子广泛用于状态管理，但有时会导致不必要的重新渲染。这就是 useRef 钩子变得无价的地方。它允许我们直接与 DOM 交互、跟踪更改并存储值，而无需触发组件重新渲染。

在本指南中，我们将逐步探索 useRef 钩子，涵盖其目的、优点和常见用例。到最后，即使是初学者也能够自信地实现 useRef 来解决 React 应用程序中的各种挑战。

什么是 React useRef Hook？

useRef 钩子是 React 核心钩子 API 的一部分。它返回一个带有 .current 属性的可变对象，该对象可用于存储您想要的任何值。与状态不同，更改 .current 值不会导致组件重新渲染。

这是 useRef 的简单语法：

const myRef = useRef(initialValue);

• initialValue：useRef 对象的初始值。
• myRef.current：存储参考值的属性。

为什么使用 useRef？

• 避免不必要的重新渲染：状态更改会触发 React 中的重新渲染，但使用 useRef 允许您在渲染之间保留值，而不会导致更新。
• 访问 DOM 元素：通常，我们需要与原生 DOM 元素进行交互，例如聚焦输入字段。 useRef 提供了一种有效的方法来做到这一点。
• 跟踪状态更改：您可以跟踪先前状态等值或跨渲染持续存在的渲染计数。

问题：React State 导致不必要的重新渲染

在 React 中，状态更改会触发重新渲染。对于性能关键型应用程序，过多的重新渲染可能会降低应用程序的速度。举个例子吧。

示例问题：导致重新渲染的状态

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log("Button clicked");
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

在此示例中，单击按钮将导致整个组件重新渲染，即使您可能只关心更新计数等特定数据。

解决方案：使用useRef来防止重新渲染

使用 useRef，我们可以存储值而不会导致不必要的重新渲染。

解决问题的参考示例

const MyComponent = () => {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log("Button clicked, count: ", countRef.current);
  };

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

在这个例子中，我们增加 countRef.current 而不触发重新渲染，因为当 useRef 改变时 React 不会重新渲染。

使用 useRef 访问 DOM 元素

React 的声明性本质抽象了直接的 DOM 操作。但有时我们需要直接访问 DOM 元素，例如聚焦输入字段或滚动到特定部分。这就是 useRef 发挥作用的地方。

示例：聚焦输入字段

const myRef = useRef(initialValue);

在此示例中，我们将 inputRef 分配给输入字段的 ref 属性。单击按钮时会调用 handleFocus 函数，允许我们使用 inputRef.current.focus() 以编程方式聚焦输入字段。

跟踪状态变化而不重新渲染

有时，您需要随着时间的推移跟踪值而不触发重新渲染。一个常见的用例是跟踪变量的先前状态。

示例：使用 useRef 跟踪先前状态

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log("Button clicked");
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

在此示例中，我们使用 useRef 来存储先前的值。组件使用当前值进行渲染，但之前的值存储在 prevValueRef.current 中，并且不会触发重新渲染。

useRef 会导致重新渲染吗？

不，修改 useRef 对象不会导致重新渲染。此行为使 useRef 非常适合存储需要在渲染中保留但不想用作渲染逻辑的一部分的值。

示例：useRef 更改时不重新渲染

const MyComponent = () => {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log("Button clicked, count: ", countRef.current);
  };

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

在此示例中，即使我们在每次重新渲染时更改 renderCountRef.current，它也不会导致任何额外的重新渲染。

高级示例：用于跟踪点击事件的 useRef

让我们构建一个更高级的示例，其中我们计算单击按钮而不会导致重新渲染的次数。

const FocusInput = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

在这种情况下，按钮的点击计数通过 clickCountRef.current 进行跟踪，但 React 不会重新渲染组件。

useRef 的常见错误

忘记初始化 Ref

始终记住用值或 null 初始化您的引用。

const PreviousStateExample = ({ value }) => {
  const prevValueRef = useRef();

  useEffect(() => {
    prevValueRef.current = value;
  }, [value]);

  const prevValue = prevValueRef.current;

  return (
    <div>
      <p>Current Value: {value}</p>
      <p>Previous Value: {prevValue}</p>
    </div>
  );
};

使用 useRef 存储组件状态

不要使用 useRef 来替代 useState。 useRef 只能用于不影响渲染的值。如果该值影响组件的显示，请使用 useState.

const NoRenderOnRefChange = () => {
  const renderCountRef = useRef(0);

  useEffect(() => {
    renderCountRef.current += 1;
    console.log("Component re-rendered:", renderCountRef.current);
  });

  return <p>Check the console for render count</p>;
};

常见问题 (FAQ)

1.什么时候应该使用useRef而不是useState？

当您需要存储可变值而不触发重新渲染时，请使用 useRef。对于影响 UI 的值，请使用 useState。

2. 我可以使用useRef来存储以前的状态吗？

是的，你可以使用useRef来存储以前的值而不触发重新渲染，但请记住更新useEffect中的引用。

3、修改useRef是否会导致重新渲染？

不，修改 useRef.current 不会导致重新渲染。这就是为什么它非常适合您想要避免不必要的更新的场景。

4. 如何使用 useRef 访问 DOM 元素？

将 useRef 赋给 DOM 元素的 ref 属性，则可以通过 ref.current 访问 DOM 元素。

结论

useRef hook 是 React 中一个多功能且强大的工具，它允许开发人员存储值、跟踪先前的状态以及与 DOM 元素交互，而不会导致重新渲染。从管理点击计数到集中输入，useRef 为优化性能和提供更清洁、更高效的解决方案提供了机会。通过本指南，您现在掌握了在各种场景中实现 useRef 的知识，从初级用例到更高级的应用程序。

以上是使用 React useRef Hook 掌握 DOM 操作和性能的详细内容。更多信息请关注PHP中文网其他相关文章！