React组件中状态更新函数属性的TypeScript定义优化

在React组件开发过程中,将useState返回的状态更新函数作为属性传递给子组件是一种常见做法。这种方法可以使状态管理逻辑更加模块化,但同时也需要确保类型安全性。

优化前的代码

tsx 复制代码
import { useState } from "react";
import type { FC } from 'react';

interface AddProps {
  onChange: (e: any) => void;
}

const Add: FC<AddProps> = ({ onChange }) => {
  return <button onClick={() => {
    onChange((data: number) => data + 1);
  }}>Click me!</button>
}

const MyComponent = () => {
  const [count, setCount] = useState(1);
  return (
    <>
      数量:{count}
      <Add onChange={setCount} />
    </>
  );
};

export default MyComponent;

优化前的问题

  • Add组件的onChange属性类型定义为(e: any) => void,其中e被定义为any类型,这种做法牺牲了类型安全。
  • 传递给onChange的是setCount函数,它既可以接收一个数字也可以接收一个函数。因此,我们需要更准确地定义e的类型。可以将 e 的类型定义为 number | ((prevState: number) => number)。但是这种定义都不便捷。

类型安全的改进

为了提高类型安全性,我们可以利用@types/react提供的Dispatch<SetStateAction>泛型类型来定义onChange属性。这个泛型类型允许我们指定状态更新函数可以接收的参数类型,使得类型定义更加严格和准确。

优化后的代码

tsx 复制代码
import { useState } from "react";
import type { FC, Dispatch, SetStateAction } from 'react';

interface AddProps {
  onChange: Dispatch<SetStateAction<number>>;
}

const Add: FC<AddProps> = ({ onChange }) => {
  return <button onClick={() => onChange(data => data + 1)}>Click me!</button>;
}

const MyComponent = () => {
  // 明确指定useState的类型参数为number
  const [count, setCount] = useState<number>(1); 
  return (
    <>
      数量:{count}
      <Add onChange={setCount} />
    </>
  );
};

export default MyComponent;

关键优化点

  • 使用Dispatch<SetStateAction<number>>来定义onChange属性的类型,这样既可以接收一个直接的数字也可以接收一个返回数字的函数,保证了类型的准确性和安全性。
  • Add组件的onClick事件处理函数中直接传递更新函数(data => data + 1)onChange,这里不需要显式指定data的类型,因为它会根据onChange的类型自动推断出来。

通过这些优化,我们不仅保证了代码的类型安全性,还使得组件间的状态管理逻辑更加清晰和易于维护。

相关推荐
spmcor13 分钟前
MinIO本地对象存储部署指南
前端
少年纪17 分钟前
前端用 pdf.js 将 PDF 渲染到 Canvas 再转图片,文字消失的坑
前端
RoyLin18 分钟前
TypeScript设计模式:复合模式
前端·后端·typescript
我是天龙_绍21 分钟前
CSS/JS/图片全挂了,部署后页面白屏/资源加载失败?这两个配置项坑了多少人!
前端
我的小月月21 分钟前
SQLFE:网页版数据库(VUE3+Node.js)
前端·后端
小高00722 分钟前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
汤姆Tom23 分钟前
Node.js 版本管理、NPM 命令、与 NVM 完全指南
前端·npm·node.js
Alan5215925 分钟前
Java 后端实现基于 JWT 的用户认证和权限校验(含代码讲解)
前端·后端
RoyLin35 分钟前
TypeScript设计模式:策略模式
前端·后端·typescript
brzhang1 小时前
为什么说低代码谎言的破灭,是AI原生开发的起点?
前端·后端·架构