#26 React+Typescipt useRef类型示例

在React和TypeScript的组合使用中，useRef是一个常用的Hook，它可以用来访问DOM元素或者在组件的整个生命周期内持久存储一个可变的值。下面的示例展示了如何在TypeScript环境中使用useRef。

1. 访问DOM元素

使用useRef来访问DOM元素，需要为useRef提供正确的类型注解。这里，我们使用HTMLInputElement来指定我们想要引用的DOM元素类型。

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

const TextInputWithFocusButton: React.FC = () => {
  const inputEl = useRef<HTMLInputElement>(null);

  const onButtonClick = () => {
    // 当inputEl不为null时，直接访问input元素
    inputEl.current?.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
};

2. 存储当前值

useRef也可以用来存储一个组件生命周期内的任何可变值，而且这个值的变化不会引起组件的重新渲染。

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

const TimerComponent: React.FC = () => {
  const [timer, setTimer] = useState(0);
  const intervalRef = useRef<number | null>(null);

  const startTimer = () => {
    if (intervalRef.current !== null) return; // 防止多个interval的创建
    intervalRef.current = window.setInterval(() => {
      setTimer((prevTimer) => prevTimer + 1);
    }, 1000);
  };

  const stopTimer = () => {
    if (intervalRef.current !== null) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  };

  return (
    <div>
      <div>Timer: {timer} Seconds</div>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
};

3. 泛型用法与约束

useRef可以使用泛型来指定存储的数据类型，这在你需要存储非DOM元素的数据时特别有用。

import React, { useRef } from 'react';

const GenericRefComponent: React.FC = () => {
  const dataRef = useRef<{ id: number; name: string } | null>(null);

  const assignData = () => {
    dataRef.current = { id: 1, name: 'John Doe' };
    console.log(dataRef.current);
  };

  return (
    <div>
      <button onClick={assignData}>Assign Data</button>
    </div>
  );
};

在这些示例中，我们展示了如何使用useRef来引用DOM元素、存储数据、以及如何利用TypeScript的类型系统来增强这些用法的类型安全性。这些技术可以帮助您更有效地在React应用程序中管理引用和状态。