【实战】用 Custom Hook + TS泛型实现 useArray

import { useState } from 'react';
 
// 定义泛型类型，用于表示数组中元素的类型
type UseArrayReturnType<T> = [T[], (newItem: T) => void, () => void];
 
// 自定义Hook，用于管理数组状态
function useArray<T>(): UseArrayReturnType<T> {
  const [items, setItems] = useState<T[]>([]);
 
  // 添加新元素到数组
  const addItem = (newItem: T) => {
    setItems((prevItems) => [...prevItems, newItem]);
  };
 
  // 清空数组
  const clearItems = () => {
    setItems([]);
  };
 
  // 返回状态和操作方法
  return [items, addItem, clearItems];
}
 
// 使用自定义Hook
export default function App() {
  // 使用泛型指定数组元素类型为字符串
  const [items, addItem, clearItems] = useArray<string>();
 
  // 示例：添加和清空数组
  return (
    <div>
      <button onClick={() => addItem('新项目')}>添加项目</button>
      <button onClick={clearItems}>清空列表</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

这段代码定义了一个名为useArray的自定义Hook，它使用TypeScript的泛型来提供一个灵活的数组状态管理解决方案。该Hook返回一个数组，其中包含当前状态、添加新项目的函数和清空数组的函数。在App组件中，我们演示了如何使用这个Hook来管理字符串类型的数组。