React TypeScript中的useRef

在React TypeScript中，使用useRef钩子可以创建对React组件中某个元素的引用。useRef返回一个可变的ref对象，它可以在组件的整个生命周期中保存引用，并且它的值可以在不触发重新渲染的情况下更改。

语法

const refContainer = useRef<ElementType>(initialValue);

• refContainer是创建出的ref对象。
• ElementType是一个DOM元素的类型，用于确定引用对象的类型。
• initialValue是初始值，表示当前引用的值。

用法

1. 访问DOM元素

useRef通常用于在函数式组件中访问DOM。例如，下面的代码会在页面渲染后聚焦input元素：

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

export const MyComponent = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return (
    <div>
      <input type="text" ref={inputRef} />
    </div>
  );
};

请注意，我们必须使用useEffect来确保在DOM元素被渲染后访问inputRef.current。如果我们在渲染组件时立即访问它们，则可能会得到undefined或null的引用。

2. 存储数据

useRef也可以用于存储数据。在这种情况下，initialValue参数可以设置为它的初始值。例如，下面的代码使用useRef存储一个计数器：

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

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

  const handleClick = () => {
    countRef.current = countRef.current + 1;
    setCount(countRef.current);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

在这个例子中，我们使用useRef来创建一个计数器引用，并通过handleClick函数更新它的值。我们通过把countRef.current作为useState的值来显示计数器。

3. 跟踪前一个值

最后，useRef还可以用于跟踪前一个值。例如，我们可以使用它来比较组件属性的前一个值和当前值，以便在它们更改时执行额外的操作。下面的代码演示了这个想法：

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

interface Props {
  name: string;
}

export const MyComponent = ({ name }: Props) => {
  const prevPropsRef = useRef<Props>({ name: '' });

  useEffect(() => {
    if (prevPropsRef.current.name !== name) {
      console.log('Name has changed!');
    }

    prevPropsRef.current = { name };
  });

  return (
    <div>
      <p>Hello, {name}!</p>
    </div>
  );
};

在这个例子中，我们创建了一个prevPropsRef引用来跟踪前一个Props对象。每次渲染时，我们都比较前一个name的值和当前的name值，并在发生更改时记录一条消息。最后，我们将prevPropsRef的值更新为当前Props对象，以便下次渲染使用。

结论

通过使用useRef，我们可以在React TypeScript组件中轻松访问DOM元素、存储数据和跟踪前一个值。这个钩子可以简化组件的代码，并提高我们的编码体验。