s©rie react钩子：Useref-DEV365 开发者社区

olão人，让我们继续了解我们亲爱的Reactjs的钩子，今天，让我们深入了解Reactjs上的奇妙的Useref Hook世界。如何拥有超级大国，使您可以管理组件中的可变值。输入，准备并准备在React上提高游戏！

如果他们想查看有关此圣的其他文章，请遵循以前文章和我们的github的链接：

毕竟，钩子是什么？ ð

useRef是一个挂钩（或钩子），可让您访问和直接处理组件中的礼物元素。似乎很有趣？因此，请继续阅读，就像让我们以轻松和专业的方式深入研究这个概念。它是一种母工具，可帮助您在功能组件中存储和访问可变值。如何拥有一张类似于您的贴纸票，但功能强大得多！

何时使用useref？

您可能想知道：“我什么时候应该使用Hook Useref？”好吧，我的小蚱hopper，这里有一些情况：

参考礼物的元素：当您需要拿到礼物的要素时，Useref是为了帮助您。它使您可以访问和操纵此元素作为真正的主人。告别旧文档.getElementById（）！
管理持久值：有时，您希望在渲染之间持续一个值，而不会触发渲染本身。如果useref闪耀。他维护该值，您可以在需要时访问它，而不会干扰组件的渲染周期。

Có³di的示例可以帮助您！

现在，让我们用一些córib的例子将面团放在面团上。可是等等！让我们用打字稿来增加事物，以便您拥有两全其美的方式：类型的类型和useref的魔力。

示例1：引用文本元素

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

export const AutosizeTextarea = () => {
  const textareaRefElement = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    if (textareaRefElement.current) {
      textareaRefElement.current.style.height = 'auto';
      textareaRefElement.current.style.height = `${textareaRefElement.current.scrollHeight}px`;
    }
  }, []);

  const handleChange = () => {
    if (textareaRefElement.current) {
      textareaRefElement.current.style.height = 'auto';
      textareaRefElement.current.style.height = `${textareaRefElement.current.scrollHeight}px`;
    }
  };

  return <textarea ref={textareaRefElement} onChange={handleChange} />;
};

在此示例中，我们使用useRef来创建对textarea元素的引用。 koud3用于安装组件时自动调整textarea的高度。我们将初始高度定义为“自动”，然后更新为textarea的Koud5值，并根据遏制调整高度。每当更改textarea的值时，handleChange函数都会调用

示例2：专注于加载

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

export const AutoFocusInput = () => {
  const inputRefElement = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (inputRefElement.current) {
      inputRefElement.current.focus();
    }
  }, []);

  return <input ref={inputRefElement} type="text" />;
};

在此示例中，我们使用useRef来创建对输入元素的引用。当组件组装时，Koud3用于专注于输入。如果inputRefElement.current不是零和无效的，也就是说，如果输入元素存在于礼物中，我们将其称为整个focus()，以将焦点带入输入字段。这允许在组件渲染后立即自动集中输入。

示例3和最后一个：窗口调整大小的监视

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

export const WindowResizeTracker = () => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  const [windowHeight, setWindowHeight] = useState(window.innerHeight);
  const resizeTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    const handleResize = () => {
      if (resizeTimeoutRef.current) {
        clearTimeout(resizeTimeoutRef.current);
      }

      resizeTimeoutRef.current = setTimeout(() => {
        setWindowWidth(window.innerWidth);
        setWindowHeight(window.innerHeight);
      }, 300);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      if (resizeTimeoutRef.current) {
        clearTimeout(resizeTimeoutRef.current);
      }
    };
  }, []);

  return (
    <div>
      <p>Width: {windowWidth}px</p>
      <p>Height: {windowHeight}px</p>
    </div>
  );
};

此示例，高度跟踪窗口调整大小的示例，我们在屏幕上显示窗口尺寸。我们创建了两个状态：windowWidth和windowHeight，分别存储窗口的宽度和高度。在Koudde15函数中，我们在窗口调整大小时更新这些状态。

在渲染部件中，我们使用

显示窗口尺寸

。因此，每当调整窗口大小时，尺寸都会更新并显示在屏幕上。

这些示例演示了在打字稿上使用的其他情况。无论是自动调整文本AR的高度，按下窗口调整大小还是专注于加载输入，USEREF提供了一种有力的机制来处理可变值并访问组件中的DOM元素反应。

包括£o

简而言之，USEREF是ReactJ中的一个强大工具，可以直接处理其组件中的礼物元素。当您需要直接与礼物互动时，请使用它，例如专注于输入字段或获取元素的值。但是，如果您仅处理成分的内部状态或生命周期的更新，则可能无需使用USEREF。

我希望这篇轻松且专业的文章能帮助您更好地了解useref在ReactJ中的使用。现在，您准备在项目中探索并使用这种令人难以置信的钩子。进行有趣的编码！